HTML Tables

What is table?

  1. The table is an organizational structure that is used to organize data in tabular format using rows and columns.
  2. The table is create using <table> tag.
  3. <tr> tag is used to create table rows and <td> tag is used to create columns inside row.

Tags used for creating a table

Here are some important tags used to create table

<table>

<tr>

<td>

<th>

<thead>

<tbody>

<tfoot>

Creating table in HTML

<table>
<tr>
<th>Name</th><th>Email</th>
</tr>
<tr>
<td>Alex</td><td>alex@gmail.com</td>
</tr>
<tr>
<td>Blake</td><td>blake@gmail.com</td>
</tr>
<tr>
<td>Clark</td><td>clark@gmail.com</td>
</tr>
</table>

Explanation
  1. In the above example, <th> is used to create a table heading column and <td> is used to create data columns.
  2. Difference between <th> and <td> tag is that text within the <th> tag is bold and center align whereas text within the <td> tag is left align and normal.

Uses of thead,tbody,tfoot

  1. thead, tbody, and tfoot is the logical collection of rows and divide the table into 3 parts table header, table body, and table footer respectively.
  2. This logical separation helps to style header, body and footer rows separately.
  3. The following example shows how to use thead, tbody, and tfoot in the table.
<table width="300px" border="1" cellspacing="5px" cellpadding="10px">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex</td>
      <td>alex@gmail.com</td>
    </tr>
    <tr>
      <td>Blake</td>
      <td>blake@gmail.com</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>clark@gmail.com</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td colspan="2">Copyright &copy; Idiotsdiary</td>
    </tr>
  </tfoot>
</table>


Merging rows and columns

  1. rowspan and colspan attributes are used to merge two or more rows and columns.
  2. rowspan and colspan both attributes must be used only with <td> and <th> tags.
  3. To learn more about rowspan and colspan we will create the following table structure.

  1. To create the above table example, we have to first find the rows and columns in the above table structure.
  2. If you observe carefully the above structure, you will find there are 4 rows and 4 columns.
  3. Now read the following code which generates the above structure.
<table width="300px" border="1" cellspacing="5px" cellpadding="10px">
  <tr>
    <td colspan="4">1</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
    <td colspan="2" rowspan="2">3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td><td>7</td><td>8</td><td>9</td>
  </tr>
</table>

Creating tables in HTML Video tutorial