HTML Tags List For Table

09 May 2020

List of all elements used to create a HTML table

You can use the following HTML tags to make a table your web page.

table <table> </table>
thead <thead> </thead>
tbody <tbody> </tbody>
th <th> </th>
tr <tr> </tr>
td <td> </td>
tfoot <tfoot> </tfoot>
col <col>
colspan=”2”
rowspan=”3”
colgroup <colgroup> </colgroup>
caption <caption> </caption>

Function of each HTML tags used on a table

Table containing elements and the function of HTML tags used to create a HTML table.

HTML Element	Function of the HTML element
table	Creates a HTML table
thead	Creates a row for the column headings
tbody	It's a section to hold rest of the table data
th	Creates a heading for each column
tr	Creates a row on the HTML table
td	Creates a cell that holds all the data
tfoot	Creates a footer for the table.
col	Defines a column within a table.
colspan="2"	Allows a cell to span across 2 columns or more.
rowspan="3"	Allows a cell to span across 2 rows or more.
colgroup	defines a group of columns within a table.
caption	Creates a caption for your table

Creating Your First HTML table

Every HTML table is contained inside <table></table> tags.

Table cells

Each table has to have cells that contains the data. You create cells by using the <td></td> tags. Example:

1
2
3
4
<td>Your first HTML table cell</td>
<td>Your second HTML table cell</td>
<td>Your third HTML table cell</td>
<td>Your fourth HTML table Cell</td>

Your first HTML table cell

Your second HTML table cell

Your third HTML table cell

Your fourth HTML table Cell

Table rows

To create rows in a HTML table, we use: <tr></tr> tags. Example:

Code

1
2
3
4
5
6
7
8
9
10
<table>
    <tr>
        <td>Your first HTML table Cell</td>
        <td>Your second HTML table Cell</td>
    </tr>
    <tr>
        <td>Your third HTML table Cell</td>
        <td>Your fourth HTML table Cell</td>
    </tr>
</table>

Result

Your first HTML table Cell	Your second HTML table Cell
Your third HTML table Cell	Your fourth HTML table Cell

Basic HTML table code example

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

Result:

	Knocky	Flor	Ella	Juan
Breed	Jack Russell	Poodle	Streetdog	Cocker Spaniel
Age	16	9	10	5
Owner	Mother-in-law	Me	Me	Sister-in-law
Eating Habits	Eats everyone's leftovers	Nibbles at food	Hearty eater	Will eat till he explodes

Full feature Table Example

Merge two cells in a Column HTML table

To merge two cells in a column, you use colspan=”2”. Example:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
  <tr>
    <th colspan="4">Animals</th>
  </tr>
  <tr>
    <td colspan="2">Mammals</td>
    <td colspan="2">Birds</td>
  </tr>
  <tr>
    <td>Cow</td>
    <td>Horse</td>
    <td>Chicken</td>
    <td>Ducks</td>
  </tr>

Result:

Animals
Mammals		Birds
Cow	Horse	Chicken	Ducks

View the result on codepen

Merge two cells in a row HTML table

To merge two cells in a row, you use colspan=”2”. Example: