HTML tables

Creating a table

Use the code below to create a basic table.

<table></table>

The main attributes are width, border, cell spacing and padding. The width defines the size of the table, the cell spacing determines the space between adjacent cells, the cell padding adds padding to the inside of each cell. The border attribute specifies the size of the border around the table.

<table width="250" border="0" cellspacing="2" cellpadding="2"></table>

Adding rows

When creating a table the structure is such that the rows are defined first, then the columns.

<table width="250" border="0" cellspacing="2" cellpadding="2">
   <tr>Row one</tr>
   <tr>Row two</tr>
</table>

Adding columns

Now that the rows have been added we can add columns.

<table width="250" border="0" cellspacing="2" cellpadding="2">
   <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3 </td> 
   </tr>

   <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
      <td>Row 2 Column 3</td>
   </tr>
</table>

Merging columns

Each row of a table must have the same number of columns, but you can merge columns if you want fewer columns in some rows.

<table cols="3" width="250" border="0" cellspacing="2" cellpadding="2">
   <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3 </td>
   </tr>

   <tr>
      <td colspan="3">Row 2 Column 1-3</td>
   </tr>
</table>

Note that the attribute colspan has been specified. This tells the browser how many columns this column spans. Also note that the other columns in the second row have been deleted.

Merging rows

The same idea can be applied to rows, if you want to merge them.

<table cols="4" width="250" border="1" cellspacing="2" cellpadding="2">
   <tr>
      <td rowspan="2">Big Row 1</td>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3 </td>
   </tr>

   <tr>
      <!-- Missing column -->
      <td>Row 2 Column 2</td>
      <td>Row 2 Column 3</td>
   </tr>
</table>

Note that as well as the the rowspan attribute being used, the first column of the second row has been deleted. This is because to merge a row we want the make vertical columns merge so a column must be lost.

THEAD, TBODY and TFOOT

These are elements that can be defined within a table to give the table structure. The THEAD can only be defined once and appear at the start of the table. The THEAD must come directly after the table element. The TFOOT tag generally has the same content as the THEAD and is rendered by a browser at the bottom of a table. This is used to add header elements to the bottom of a table. This tag must be placed before TBODY elements.

<table cols="4" width="250" border="1" cellspacing="2" cellpadding="2">
   <thead>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
   </tbody>
</table>

The TBODY tag can be used to also add structure to a table. This tag can be used as many times as is necessary and defines a section of the table that is logically grouped.

Captions and headers

Captions can be added to tables using the caption element. This can only be used once and must come immediately after the table element.

<table width="250" border="1" cellspacing="2" cellpadding="2">
   <caption>Table in HTML</caption>

   <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
   </tr> 
</table>

Headers can be created using the TH element in the place of a column element (td). These element can be used anywhere as many times as is necessary.

<table cols="4" width="250" border="1" cellspacing="2" cellpadding="2">
   <tr>
      <th>Row 1 Column 1</th>
      <th>Row 1 Column 2</th>
   </tr>

   <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
   </tr>
</table>

Categories

Tags

No tags

Social