HTML – Tables

Share

HTML tables are used to arrange HTML-supported data into rows and columns of cells.

HTML tables are created using the <table> tag. Within the tags, you typically use the <tr> tag to create table rows. Tr stands for table row. Inside the <tr> tag, you can use the <td> tag to create data cells. Td stands for table data. The content is placed under the <td> tag.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Tables Example</title>
   </head>
   <body>
      <table border="1">
         <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>
         <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
            <td>Row 3, Column 3</td>
         </tr>
      </table>
      
   </body>
</html>

The above code will produce a table such as this:

Row 1, Column 1Row 1, Column 2Row 1, Column 3
Row 2, Column 1Row 2, Column 2Row 2, Column 3
Row 3, Column 1Row 3, Column 2Row 3, Column 3

We’ve used the border attribute to give the table and cells a border of 1 pixel.

Table Heading

You can use the <th> tag to define a table heading. <th> tags replace <td> tags in rows where you want to specify a heading. Typically they would be used on the first row even though they can appear on any row.

Example

This HTML table uses table headings on the first row.

<table>
  <tr>
    <th>Company</th>
    <th>Owner</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Acme Corporation</td>
    <td>Martin Acmes</td>
    <td>England</td>
  </tr>
  <tr>
    <td>Merlin Fisheries</td>
    <td>Peter Chenney</td>
    <td>Australia</td>
  </tr>
  <tr>
    <td>Max Agri Tools</td>
    <td>Fred Hammad</td>
    <td>United States</td>
  </tr>
</table>

The above code will produce a table such as this:

CompanyOwnerCountry
Acme CorporationMartin AcmesEngland
Merlin FisheriesPeter ChenneyAustralia
Max Agri ToolsFred HammadUnited States

Table Height and Width

Use the width and height attributes to set the table size. The dimensions can be set using either pixels or a percentage of the available screen area.

<table border="1" width="480" height="320">
   ...
</table>

Table Background and Border Color

You can set table background color and border color using one of the following attributes depending on what you want to achieve.

  • bgcolor attribute − Use this to set the background color for the whole table or if used as a attribute then it will apply to just one cell.
  • background attribute − Use this to set a background image for the whole table or if used as a attribute then it will apply to just one cell.
  • bordercolor attribute – Use this to set a border color for the whole table.

Note − The bgcolor, background, and bordercolor attributes were deprecated in HTML5. Do not use these attributes. Instead, use the style attribute or external CSS styles.

Cell Padding and Cell Spacing

You can use the following attributes to control white space within and surrounding cells. The value of these attributes is in pixes.

  • cellpadding attribute – use this attribute in the <td> tag to set the white space between the content and the edge of the cell
  • cellspacing attribute – Use this attribute in the <td> tag to set the white space between surrounding cells
<table border="1" cellpadding="7" cellspacing="7">
   <tr>
      <th>Name</th>
      <th>Age</th>
   </tr>
   <tr>
      <td>Zawadi Amani</td>
      <td>50</td>
   </tr>
   <tr>
      <td>Mumbi Gichui</td>
      <td>35</td>
   </tr>
</table>

The above code will produce a table such as this:

NameAge
Zawadi Amani50
Mumbi Gichui35

Column Spans and Row Spans

You can use the following attributes in the <td> tags as follows:

  • colspan attribute – use this attribute to merge cells horizontally
  • rowspan attribute – use this attribute to merge cells vertically

Example

colspan and rowspan attributes usage:

<table border="1">
   <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
   </tr>
   <tr>
      <td colspan="3">Row 1 Cell 1</td>
   </tr>
   <tr>
      <td rowspan="2">Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
   </tr>
   <tr>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
   </tr>
</table>

The above code will produce a table such as this:

Column 1Column 2Column 3
Row 1 Cell 1
Row 2 Cell 1Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 2Row 3 Cell 3

HTML tables can be divided into three logical sections namely a header, a body, and a footer.

The three elements for sectioning the header, body, and footer of a table are:

  • <thead> − used to create a separate table header.
  • <tbody> − used to indicate the main body of the table.
  • <tfoot> − used to create a separate table footer.

The content within the <thead> is always displayed at the top of the table while the content within the <tfoot> tag is always at the end of the table. These tags work similarly to the header and footer of a Word Processor where the content in those sections is displayed on every page. A table can have more than one <tbody> tag. These can act as different pages or groups of data.

Example

Table showing the use of <thead>, <tbody>, <tfoot> tags:

<table>
  <thead>
    <tr>
      <th colspan="2">This is the table header</th> 
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td colspan="2">This is the table footer</td> 
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

The above code will produce a table such as this:

This is the table header
January$100
February$80
This is the table footer

Nested Tables

Tables can be nested within other tables as long as the child table is placed inside a <td> tag.

Example

<table border="1" width="100%">
   <tr>
     <td>Column 1</td>
     <td>Column 2</td>
   </tr>
   <tr>
      <td colspan="2">
         <table border = "1" width = "100%">
            <tr>
               <th>Month</th>
               <th>Profit</th>
            </tr>
            <tr>
               <td>January</td>
               <td>$5000</td>
            </tr>
            <tr>
               <td>February</td>
               <td>$7000</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Share