HTML Tables

previous next


With HTML you can create tables.


Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

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

How it looks in a browser:

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

 


Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

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

How it looks in a browser:

row 1, cell 1 row 1, cell 2

 


Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1">
  <tr>
    <th>Heading</th>
    <th>Another Heading</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

How it looks in a browser:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

 


Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

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

How it looks in a browser:

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

Note that the borders around the empty table cell are missing (NB! Some browsers display the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible: 

<table border="1">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>&nbsp;</td>
  </tr>
</table>

How it looks in a browser:

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

 


Table Tags

Tag

Description

<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption

 


Try it

To see how HTML works, you can only push the submit button, or you can make your own HTML code.

           

 


previous next