Tables


Tables are used mainly to organise information. The basic tag to denote a table is
<table>. Some of the attributes of the table tag are
border
Thickness of the table border
cellpadding
amount of space between contents of a cell and cell border
cellspacing
space between individual cells
width
width of table
eg.
<table border="2" cellpadding="4" cellspacing="3">
<!--other table tags-->
</table>

There are other tags that go inside the table container.
<caption>
Caption for the table. eg. <caption>Table caption</caption>
<thead>
defines the header section of the table. This has a couple of attributes.

align
used to align the contents of the header section. It can take the values of left, right, center, or justify.
valign
controls the vertical alignment in the header cells. Can take the values of top, middle, bottom, or baseline.
eg.
<thead align="center" valign="baseline">
<!--table elements like rows and columns. Each table header must have atleast one row.-->
</thead>
<tfoot>
Defiens the footer section of the table. It takes the same attributes as the thead tag.
<tbody>
Defines the body section of the table. Takes the same attributes as the thead or tfoot.
<tr>
Defines a row in the table. It has the attributes align and valign.
<td>
Defines a cell in the table. Is used inside a <tr> container tag, to define the number of cells in that row.
<th>
table header cell. Is generally used as cells in the first row to indicate the heading for each column.
Both td and th have the following attributes.
align
Horizontal alignment within the cell. Takes values of left, right, center or justified.
colspan
Specifies the number of columns the cell should occupy. Default is 1.
rowspan
Specifies number of rows the cell should occupy.
valign
Vertical alignment of the cell. Takes values of top, middle, bottom or baseline.
I know that tables can be hard to understand. So, I formulated this example for you. The table is drawn below and the code can be read in the following file →Tables example. Compare the code with the table. Experiment with different attributes and formations.

Table example
Header 1 Header 2 Header 3
Column 1 Column 2 Column 3
Row 1 Item 1 Row 1 Item 2 Item 3
Row 2 Item 1,2
Row 3 Item 1 Row 3 Item 2
Footer 1 Footer 2


You can view the source code of this table here.

Home