Home | E-mail
HTML Basics - Part 8 of 12 by Matthew Bacon
Tables
cell 1 | cell 2
cell 3 | cell 4
cell 5 | cell 6
Gosh, where do I start... HTML tables allow you to customise the design and layout of your web page. For instance, using tables you can split your page into several columns (like a newspaper) or even add margins. In fact, almost any layout you can conceive! Do not worry if you do not understand this tutorial after your first read through, tables can be tricky to understand. Take your time, follow the examples provided and all should become clear soon. A HTML table is contained between the tags, `<TABLE>` and `</TABLE>`. Tables consist of columns and rows. `<TR>` indicates the start of a new row. `<TD>` indicates the start of a cell within a row and `</TD>` indicates the end of a cell. Below is an example of a basic table.
    <TABLE BORDER=1>
            <TR>
            <TD>cell 1</TD>
            <TD>cell 2</TD>
            <TR>
            <TD>cell 3</TD>
            <TD>cell 4</TD>
    </TABLE>
cell 1 | cell 2
cell 3 | cell 4
The tags, `<TABLE>`, `<TR>` and `<TD>` all have attributes associated with them. Below, the key attributes of these tags are discussed. The key attributes of the tag, `<TABLE>` are: `ALIGN=""` Align the entire table `LEFT`, `RIGHT` or `CENTER`. `BORDER=` How thick, in pixels, should the border be? (`=0` no border at all) `CELLPADDING=` The margin, in pixels, between the cells border and its content. `CELLSPACING=` The spacing, in pixels, between each cell. `WIDTH=` The total width of the table. This value can either be in pixels or a percentage (in relation to browser window). The key attributes of the tag, `<TR>` are: `ALIGN=""` The alignment of each cells contents in the row `LEFT`, `RIGHT` or `CENTER`. `VALIGN=""` The vertical alignment of each cells contents in the row `TOP`, `MIDDLE` or `BOTTOM`. The key attributes of the tag, `<TD>` are: `ALIGN=""` The alignment of the cells contents `LEFT``,` `RIGHT` or `CENTER`. The default is `LEFT`. `BGCOLOR="#rrggbb"` The background color of the cell, in rrggbb format. `COLSPAN=` The number of columns the cell should span. `ROWSPAN=` The number of rows the cell should span. `NOWRAP=""` Do not allow the cells contents to wrap (like a word processor) `YES` or `NO`. `VALIGN=""` The vertical alignment the cells contents `TOP`, `MIDDLE` or `BOTTOM`. Here are some examples for you to try out ;-)
    <TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=16

    CELLSPACING=4 WIDTH=80%>
    <TR ALIGN="RIGHT">
       <TD>cell 1</TD>
       <TD>cell 2</TD>
       <TD>cell 3</TD>
       <TD>cell 4</TD>

    <TR VALIGN="TOP">
       <TD>cell 5</TD>
       <TD>cell 6</TD>
       <TD>cell 7</TD>
            <TD>cell 8</TD>

    </TABLE>

    <TABLE ALIGN="RIGHT" CELLPADDING=8 CELLSPACING=4

    WIDTH=300>
    <TR>
        <TD ALIGN="LEFT">cell 1</TD>
        <TD ALIGN="CENTER">cell 2</TD>
        <TD ALIGN="RIGHT">cell 3</TD>
    <TR>
        <TD BGCOLOR="#FF0000">cell 4</TD>
        <TD BGCOLOR="#00FF00">cell 5</TD>
        <TD BGCOLOR="#0000FF">cell 6</TD>
    </TABLE>

    <TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=8

    CELLSPACING=4>
    <TR>
        <TD COLSPAN=2 ROWSPAN=1>cell 1</TD>
        <TD COLSPAN=1 ROWSPAN=1>cell 2</TD>
    <TR>
        <TD COLSPAN=1 ROWSPAN=1>cell 3</TD>
        <TD COLSPAN=2 ROWSPAN=2>cell 4</TD>
    <TR>
        <TD COLSPAN=1 ROWSPAN=1>cell 5</TD>
    </TABLE>
Below is a very complicated table! If you're feeling brave, why not try and work out the HTML code ;-)
Previous | Next
MyAtari magazine - Tutorial #8, April 2001 | Contents Features Reviews Tutorials Regulars Adverts
[ Top of page ]
Copyright © 2001 MyAtari