HTML 4 Kids: Lesson Week 8

Tables

The Table Tag
 
<table cellpadding="3" border="3" bgcolor="tan" width="200">

The bgcolor and width attributes can also be used in the table tag, the table row tag or the table data tags. When there is no width, the table is sized to fit the contents.

  • cellpadding - the amount of space between the cell border and the cell content in pixels.
  • border - the width of the border in pixels. If you do not want a border to show, say none here.
  • bgcolor - the color of the background
  • width - the total width of the table in pixels
    • The Table Row

    Each table row begins with the <tr> tag and ends with the </tr> tag.

    The Table Cell
    Surround the contents of each cell with <td> and </td>
    If you need a cell to span across more than one cell, add the colspan attribute:
    colspan="2"
    The number two means this cell spans 2 columns.
    End the Table

    The table will not work right unless you end the set of table code with </table>

    Aligning Table Content
    Horizontal Alignment
    <td align="center">
    <td align="right">
     
    Vertical Alignment
    <td valign="top">
    <td valign="center">
    <td valign="bottom">
     
    Blank Cells
    Include a non-breaking space in blank cells - &nbsp

    A Simple Example

    <table cellpadding="3" border="3" bgcolor="tan" width="400">
    <tr>
    <td> fruit</td>
    <td>vegetable</td>
    <td>grain <td/>
    </tr>
     
    <tr>
    <td>apple</td>
    <td>carrot</td>
    <td>wheat</td>
    </tr>
     
    <tr>
    <td>pear</td>
    <td>tomato</td>
    <td>barley</td>
    </tr>
    </table>

    Which looks like this:

    fruit vegetable grain
    apple carrot wheat
    pear tomato barley
     
    Return