Quick HTML




Tables


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>
Robert Susan
John Barbara
Michael Lisa
Paul Helen


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>
Player Score
Steven 12570
Brenda 11320
Pamela 10670


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>
This cell spans two columns
cell 1 cell 2


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>
cell 1 This cell spans four rows
cell 2
cell 3
cell 4


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>
The Tiger team
WillieDianaJane RogerJackCraig
Assistants:
BarbaraSharonCynthia    


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>
cell 1 cell 2
cell 3 cell 4
cell 5
Next page :

how to use frames.



|   Back   |   Index   |   Next   |