Table basic structure

The table basic structure is made of one or more rows of one or more data cells.

A table cell usually contains some text (a word, a number, a sentence) or a picture. It may even be empty.
A table cell may also contain another table, or any HTML formatted content too.

A table start with the <TABLE> tag and ends with the </TABLE> tag.

A row starts with the <TR> tag and ends with the </TR> tag.

A data cell starts with the <TD> tag and ends with the </TD> tag.

This is a table structure with two rows and two columns:

<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>

1 2 3 4

Below is an example of a real table with four rows and two columns.

The table has a summary that provides a description of the content.
Usually, the browser hide this information from the normal view, but can show it if is required.

<TABLE summary="Just married">

<TR><TD>Robert</TD><TD>Susan</TD></TR>

<TR><TD>John</TD><TD>Barbara</TD></TR>

<TR><TD>Michael</TD><TD>Lisa</TD></TR>

<TR><TD>Paul</TD><TD>Helen</TD></TR>

</TABLE>

Note: the cells borders are not visible.

Empty cells

Remember: to write an empty cell, fill it with at least an empty space ( &nbsp; )

<TD>&nbsp;</TD>

Heading cells

We can put an heading cell over a column of data cells using the heading tag.

Insert a row with the heading text between the <TH> and </TH> tags.

<TABLE summary="Top 3 players">

<TR><TH>Player</TH><TH>Score</TH></TR>

<TR><TD>Steven</TD><TD>12570</TD></TR>
<TR><TD>Brenda</TD><TD>11320</TD></TR>
<TR><TD>Pamela</TD><TD>10670</TD></TR>

</TABLE>

Span rows or colums

Data cells and header cells can span more rows or columns.

To span columns specify the colspan number of columns to span.

<TABLE summary="colspan test">

<TR> <TD colspan="2">This cell spans two columns</TD> </TR>

<TR> <TD>1</TD> <TD>2</TD> </TR>

</TABLE>

To span rows specify the rowspan number of rows to span.

<TABLE summary="rowspan test">

<TR> <TD>cell 1</TD> <TD rowspan="4">This cell spans four rows</TD></TR>

<TR> <TD>cell 2</TD> </TR>
<TR> <TD>cell 3</TD> </TR>
<TR> <TD>cell 4</TD> </TR>

</TABLE>

Grouping rows or columns

It's possibile to write the code in a way to highlight the logical relation of a group of rows, or columns, or headers.

To group rows, put them between the <TBODY> tag and the </TBODY> tag.

To group headers, put them between the <THEAD> tag and the </THEAD> tag.

To group columns, put them between the <COLGROUP> tag and the </COLGROUP> tag.

<TABLE summary="Tbody example">

<TR><TH colspan="6">The Tiger team</TH></TR>

<TBODY>
<TR>
<TD>Willie</TD><TD>Diana</TD><TD>Jane</TD>
<TD>Roger</TD><TD>Jack</TD><TD>Craig</TD>
</TR>
</TBODY>


<TBODY>
<TR><TD colspan="6">Assistants:</TD></TR>
<TR>
<TD>Barbara</TD><TD>Sharon</TD><TD>Cynthia</TD>
<TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD>
</TR>
</TBODY>

</TABLE>

Nested tables

A cell may contain the code of another table.
Each row group need to be enclosed within the <TBODY> and </TBODY> tags.

<TABLE summary="Outer table">
<TBODY>

<TR>

 <TD> 
  <TABLE summary="Inner table">
  <TBODY>
   <TR> <TD>cell 1</TD> <TD>cell 2</TD> </TR>
   <TR> <TD>cell 3</TD> <TD>cell 4</TD> </TR>
  </TBODY>
  </TABLE> 
 </TD>

 <TD>cell 5</TD>

 </TR>

</TBODY>
</TABLE>