Loading

Table

  • Table tags are used to represent data in an organized manner.
  • It contains rows and columns to represent data and each single unit containing data is called the cell of the table.
  • It contains three tags within it: <tr>,<th> & <td> for rows, heads and cells
  • <th> for column header,<td> for table data and <tr> for table rows.

Example:

Student NameMarks
Prince56
Rahul59

Syntax:

<table>
  <tr>
    <th>column1</th>
    <th>column2</th>
  </tr>
  <tr>
    <td>row1</td>
    <td>row2</td>
  </tr>
</table>

Example:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Tables</title>
</head>

<body>
    <table>
        <tr>
            <th>Name </th>
            <th>City</th>
        </tr>
        <tr>
            <td>Prince</td>
            <td>Patna</td>
        </tr>
        <tr>
            <td>Rahul</td>
            <td>Delhi</td>
        </tr>
        <tr>
            <td>Ravi</td>
            <td>Banglore</td>
        </tr>
    </table>
</body>

</html>

Output:


Table Rows

  • As the name suggests it represents the rows in Table which is defined by <tr> and </tr> tags
  • The table rows are written between <tr> and </tr> tags.

Example:

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

<head>
    <title>Table</title>
    <style>
        table,
        td,
        tr {
            border: 2px solid;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>Row1,Cell1</td>
            <td>Row1,Cell2</td>
            <td>Row1,Cell3</td>
        </tr>
        <tr>
            <td>Row2,Cell1</td>
            <td>Row2,Cell2</td>
            <td>Row2,Cell3</td>
        </tr>
    </table>
</body>

</html>

Output:


Table Cells

  • The table cell is defined by <td> and </td> tags.
  • It contains table cells.

Example:

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

<head>
    <title>Table</title>
    <style>
        table,
        td,
        tr {
            border: 2px solid;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>Cell1</td>
            <td>Cell2</td>
            <td>Cell3</td>
        </tr>
    </table>
</body>

</html>

Output:


Table Headers

  • The table headers are defined by <th> and </th> tags.
  • It is used when we want to define our cells as headings or head cells.

Example:

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

<head>
    <title>Table</title>
    <style>
        table,
        td,
        tr {
            border: 2px solid;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
        </tr>
        <tr>
            <td>Row1,Cell1</td>
            <td>Row1,Cell2</td>
            <td>Row1,Cell3</td>
        </tr>
        <tr>
            <td>Row2,Cell1</td>
            <td>Row2,Cell2</td>
            <td>Row2,Cell3</td>
        </tr>
    </table>
</body>

</html>

Output:


TagDescription
<table>used for a table
<th>used for a header cell in a table
<tr>used for a row in a table
<td>used for a cell in a table
<caption>used for a table caption
<colgroup>used for a group of one or more columns in a table for formatting
<col>used for column properties for each column within a <colgroup> element
<thead>used for the header content in a table
<tbody>used for the body content in a table
<tfoot>used for the footer content in a table