{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

HTML Table Tutorials

This is a tutorial on HTML tables. This tutorial includes a video tutorial.

How To Create a Table

A starting <table> tag and the ending </table> tag define a table

<table> </table>

Nested within the <table> tags are table rows. Tables rows are defined be a starting <tr> tag and an ending </tr> tag.

<table> <tr> </tr> </table>

Table cells hold the data. Table cells are nested within table rows. A starting <td> tag and an ending </td> tag defines a data cell.

<table> <tr> <td>table cell</td> </tr> </table>

The table below contains 2 table rows and each table contains 3 table cells.

row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3

Table Border Attribute

Tables that do not have a border attribute specified will be displayed without any borders. An example of a table without borders is the table example above. To display a table with borders, you need to specify the border attribute.

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 2, cell 3</td> </tr> </table>

The HTML code above creates the table with a border below.

row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3

NOTE: The table border can and should be specified using CSS.

Table Headings

Headings in a table are defined a starting <th> tag and an ending </th> tag.

<table> <tr> <th>table heading</th> </tr> <tr> <td>table cell</td> </tr> </table>

An example of an table with table headings is shown below.

table heading table heading table heading
row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3

Tutorials

References

Templates

Sponsors

Advertise your web design and web development related products and services here.