HTML Tables - HTML - dyclassroom | Have fun learning :-)

We use the <table> tag to create tables in HTML. Tables consists of rows and columns. We create table rows using the <tr> tag. And data inside a table row is created by using the <td> tag.

Following is an example of a table.


<table>
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

border attribute

To give border to each cell of the table we use the border attribute.


<table border="2">
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

If border is not required then set the border value to 0 i.e, border="0".

cellspacing attribute

We use the cellspacing attribute to adjust the width of the borders.


<table border="1" cellspacing="5">
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

cellpadding attribute

We use the cellpadding attribute to specify the space between the content and the border.


<table border="1" cellpadding="20">
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

colspan attribute

We use the colspan attribute to merge two or more columns into one.


<table border="1" cellpadding="5" cellspacing="5">
  <tr>
    <td colspan="2">Cell 1</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

rowspan attribute

We use the rowspan attribute to merge two or more rows into one.


<table border="1" cellpadding="5" cellspacing="5">
  <tr>
    <td rowspan="2">Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 4</td>
  </tr>
</table>

bordercolor attribute

We use the bordercolor attribute to change the color of the border.


<table border="1" cellpadding="5" cellspacing="5" bordercolor="red">
  <tr>
    <td rowspan="2">Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 4</td>
  </tr>
</table>

bgcolor attribute

We use the bgcolor attribute to change the background color of the table.


<table border="1" cellpadding="5" cellspacing="5" bordercolor="red" bgcolor="lightcyan">
  <tr>
    <td rowspan="2">Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 4</td>
  </tr>
</table>

width attribute

We use the width attribute to change the width of the table. The value is in pixels and percentage.


<table border="1" width="256">
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

height attribute

We use the height attribute to change the height of the table. The value is in pixels and percentage.


<table border="1" height="128">
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

Table caption

We use the caption tag to create caption for the table.


<table border="1">
  <caption> Sample Table </caption>
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

Table head

We use the thead tag to create head for the table.


<table border="1">
  <caption> Sample Table </caption>
  <thead>
    <tr>
      <th> Column1 </th> <th> Column 2 </th>
    </tr>
  </thead>
  <tr>
    <td>Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

Table body

We use the tbody tag to create body for the table. The tbody tag must appear after the thead tag.


<table border="1">
  <caption> Sample Table </caption>
  <thead>
    <tr>
      <th> Column1 </th> <th> Column 2 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td> <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td> <td>Cell 4</td>
    </tr>
  </tbody>
</table>

Table footer

We use the tfoot tag to create footer for the table. The tfoot tag must appear before the tbody tag.


<table border="1">
  <caption> Sample Table </caption>
  <thead>
    <tr>
      <th> Column1 </th> <th> Column 2 </th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2"> Footer </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Cell 1</td> <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td> <td>Cell 4</td>
    </tr>
  </tbody>
</table>