Lesson Plan




Valid XHTML 1.0 Transitional

Valid CSS!

Tables

Tables are used to display grids with rows and columns. In the past websites were created entirely with tables and content. Nowadays tables should be used to display tabular data only as we have CSS now that does not require the use of tables to display all of the content.

The

tag is the main tag used to define a table in a document.

The

tag creates a new row in a table.

The

tag creates the data inside a cell.

This is an example of how these table tags are used:

this is the data in cell 1, row 1 this is the data in cell 2, row 1
this is the data in cell 3, row 2 this is the data in cell 4, row 2

This is what the HTML code looks like:


  

    this is the data in cell 1, row 1
    this is the data in cell 2, row 1
  

  

    this is the data in cell 3, row 2
    this is the data in cell 4, row 2

The

tag is used to create a caption inside a table. You can only have one caption per table and it must be place right after the beginning tag.

The

tag is used to group header content in a table.

The

tag is used to group body content inside of a table.

The

tag is used to group the content inside of the table footer.

This is an example of how these tags are used in a table:

The

tag is used to create header content.
Table Caption
Column 1 Header Column 2 Header
Footer cell 1 Footer cell 2
Cell 1 Row 1 Cell 2 Row 1
Cell 1 Row 2 Cell 2 Row 2
Cell 1 Row 3 Cell 2 Row 3

This is how the html code looks:


Table Caption
  
     

        Column 1 Header
        Column 2 Header
     

  
  
     

        Footer cell 1
        Footer cell 2
     

  
  
     

        Cell 1 Row 1
        Cell 2 Row 1
     

     

        Cell 1 Row 2
        Cell 2 Row 2
     

     

        Cell 1 Row 3
        Cell 2 Row 3

The tag is used to span a column.

The tag is used to span a row.

Here’s an example:

Cell 1 Header Cell 2 Header
Row 1 Cell 1 takes up two cells
Row 2 Cell 1 takes up two cells also
Row 3 Cell 1 Row 3 Cell 2 takes up the below cell
Row 4 Cell 1

Here’s the HTML:


  
    

      Cell 1 Header
      Cell 2 Header
    

    


      Row 1 Cell 1 takes up two cells
    

    

      Row 2 Cell 1 takes up two cells also
    

    

     Row 3 Cell 1
     Row 3 Cell 2 takes up the below cell
    

    

     Row 4 Cell 1

 



Table Attributes

Cell Padding

cellpadding is an attribute for a table and defines the space inside of cells.

Cell Spacing

cellspacing is an attribute for a table and defines the space outside cells.

Width / Height

Width and height attributes specify the tables width and height just like an image.

Border

The border attribute defines the thickness of the outline in a table.


Take the quiz »