HTML Table

HTML <table> tag is used to display data in tabular form (row * column). HTML tables allow web developers to arrange data into rows and columns. Each table row starts with a <tr> and end with a </tr> tag.

A table is a structured set of data made up of rows and columns (tabular data).

A table in HTML consists of table cells inside rows and columns. Each table cell is defined by a <td> and a </td> tag. Everything between <td> and </td> are the content of the table cell. They can contain all sorts of HTML elements; text, images, lists, other tables, etc. The elements under <td> are regular and left aligned by default.

Tables can be divided into three portions − a header, a body, and a foot.

  • <thead> − to create a separate table header.
  • <tbody> − to indicate the main body of the table.
  • <tfoot> − to create a separate table footer.
Contents hide
HTML Table Tags
HTML Table Example

HTML Table Tags

TagDescription
<table>It defines a table.
<tr>It defines a row in a table. tr stands for table row.
<th>It defines a header cell in a table. th stands for table header. By default, the text in <th> elements are bold and centered, but you can change that with CSS.
<td>It defines a cell in a table. td stands for table data.
<caption>It defines the table caption. The main use of a caption is to provide a description about the data presented in a table.
<colgroup>It specifies a group of one or more columns in a table for formatting.
<col>It is used with <colgroup> element to specify column properties for each column.
<tbody>It is used to group the body content in a table.
<thead>It is used to group the header content in a table.
<tfoot>It is used to group the footer content in a table.
HTML Table Tags

You can use border attribute of table tag in HTML to specify border. However this is not recommended now. You can use CSS for that purpose. You will study about it in CSS lesson.

HTML Table Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
</head>

<body>
    <table border="1">
    
            <tr>
                <th>Name</th>
                <th>Salary</th>
            </tr>
  
            <tr>
                <td>James Watson</td>
                <td>5000$</td>
            </tr>

            <tr>
                <td>William Smith</td>
                <td>7000$</td>
            </tr>

            <tr>
                <td>Nil Jack</td>
                <td>17000$</td>
            </tr>

    </table>
</body>

</html>
HTML Table Example