2d. Tables

Tables are really useful when you want to start controlling where things go on the page, and if you want to organize things in colums. This is a very brief introduction to tables; there's a fair amount more you can do with them. But this will get you started.

A table is data (or text, or whatever) organized in rows and columns. Like everything else in html, they begin and end with tags, pretty intuitive in this case:

<table>

...

</table>

To specify the rows and columns, you use <tr> and <td> tags. You write data by the row, separating columns with <tt> tags. It's a good idea to indent as you imbed tags, that way you can visually follow what row or column you're working on. Thus, a simple table might look like this:

<table border=1>
    <tr>
        <td> A </td>
        <td> B </td>
    </tr>
    <tr>
        <td> C </td>
        <td> D </td>
    </tr>
</table>
... which would render like this:
AB
CD

Table parameters

  1. Tables can take many parameters. One of the most useful ones is the border parameter, as used above. If you want your table to have an outline, within the tag, specify "border=1" as follows:

    <table border=1>

    There is no real default for border or no-border -- this is one of those non-standardized elements of html, so in most browsers if you don't specify a border parameter, there won't be one, but some will stick one in anyhow. You may as well specify border=0 if you don't want one, and border=1 if you do.

    The border also doesn't have to be just 1, it can be wider if you make the value greater.

  2. Another really useful table parameter is the cellpadding parameter. Each entry in a table is called a cell, and unless you want the borders all squished up right next to what's in the cells, you need to pad the cells a little. This is specified in pixel widths. Usually a good padding is 5 to 10 pixels. Below is an example of the table from above with no padding, with 5-pixel padding, and with 10-pixel padding:

    AB
    CD
    AB
    CD
    AB
    CD
    cellpadding=0 cellpadding=5 cellpadding=10
  3. Another useful parameter is the align specification. Tables will default to being all the way at the left side of your screen, so unless you want all of them way over there, you need to tell the browser (which interprets your code) where to put the table. You do this using the align parameter.

    This is really simple. You just tell it "left", "right", or "center", for example:

    <table align=center>

  4. <td&gr; tags can take parameters, too. One of the neatest ones is to use this to put an image behind the text you're writing. You can do this by making a table with no cellpadding, no border, and using the background td parameter. To get the whole image, you'll also need to find out how big your image is (most graphics programs will tell you this), and specify the height and width in the <td> tag. Code for that looks like this:

    <table align=center cellpadding=0 border=0>
        <tr>
            <td background="../../images/broccoli.jpg" height=150 width=150>
                <font color=white>
                Now I a writing on top of broccoli.
                How cool is that?
                </font>
            </td>
        </tr>
    </table>

    Which renders as:
    Now I a writing on top of broccoli. How cool is that?
    If this looks confusing, go read about images and then come back to this section.

<-- back   ||   next -->
tutorial