Creating a table in HTML

Tables are represented by the table tag. By default, tables will have a border width set to 0, so that you may not see borders for the table.

Creating a table in HTML

Tables are represented by the <table> tag. By default, tables will have a border width set to 0, so that you may not see borders for the table.

  • A table is created using <table> tag.
  • Table heading is created using <th> tag.
  • A table row is created using <tr> tag.
  • Table data (column) is created using <td> tag.
<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Gender</td>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Christina</td>
        <td>25</td>
        <td>Female</td>
    </tr>
</table>

Output

Name Age Gender
John 30 Male
Christina 25 Female

Table caption

The table caption can be specified using <caption> tag immediately after <table> tag.

Table summary

Using summary attribute, you can provide a brief description of the table. This may be visible only on screen readers.

<table summary="This is a small description about my table.">

Table border

Using border attribute, you can specify border for the table. This attribute is provided in <table> tag.

Eg: <table border="1">

Using border attribute is deprecated. CSS should be used to style table.

Table header, body and footer is specified using <th>, <tead>, <tbody> and <tfoot> tags.

Anything written in <th> tag will appear bold and center aligned.
It is not a must to specify <th> tag within <thead> tag as shown in the example.
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Donald</td>
            <td>27</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </tfoot>
</table>

Output

Name Age
John 35
Donald 27
Name Age

Rowspan and colspan

rowspan is used to specify the number rows which a row should span.

colspan is used to specify the number columns which a colums should span.

<td rowspan="2">
<td rowspan="3">

Example

<table border="1">
    <tr>
        <th rowspan="3">This is an example for rowspan</th>
    </tr>
    <tr>
        <td colspan="2">Cell 1 and 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

Output

This is an example for rowspan
Cell 1 and 2 Cell 3
Cell 1 Cell 2 Cell 3

Styling a table

<html>
<head>
    <style>
        table,tr,td
        {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th rowspan="3">This is an example for rowspan</th>
        </tr>
        <tr>
            <td colspan="2">Cell 1</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </table>
</body>
</html>

Output

This is an example for rowspan
Cell 1 Cell 3
Cell 1 Cell 2 Cell 3

Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.