Dev Practical

HTML Tags List For Table

List of all elements used to create a HTML table

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

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:

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
  <tr>
    <td>Stallion</td>
    <td>Horse</td>
  </tr>
  <tr>
    <th rowspan="2">Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

Result

Stallion Horse
Chicken Hen
Rooster

Resources: Table basics MDN(Mozilla Development Network)