Web developers can organised data into rows and columns using HTML tables.

 





What is an HTML Table?

Table cells enclosed in rows and columns make up an HTML table.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Simple HTML table</title>
</head>
<style>
    table, th, td {
      border:1px solid red;
  }
</style>
<body>

    <h2>Simple HTML table</h2>

    <table style=“width:100%”>
      <tr>
        <th>Company Name</th>
        <th>Contact Details</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>Faltu Company</td>
        <td>+911234567890</td>
        <td>43, Fast Bangla, Germany</td>
    </tr>
    <tr>
        <td>Moje Mastram Company</td>
        <td>+911234567891</td>
        <td>45, FGT Bangla, Mexico</td>
    </tr>
</table>

<p>We’ve added borders to the table to help you comprehend the sample better.</p>

</body>
</html>

HTML Table



Table Cells


A <td> tag and a
</td> tag define each table
cell.

Table data is what it’s called.


The contents of the table cell are everything between the
<td> and
</td> tags.


Note: Any type of HTML element, including text, photos, lists, links, and
other tables, can be included in a table cell.


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table cells are defined by TD elements.</title>
</head>
<style>
    table, th, td {
      border:1px solid red;
  }
</style>
<body>

    <h2>Table cells are defined by TD elements.</h2>

    <table style=“width:100%”>
      <tr>
        <td>Rishi</td>
        <td>Rasik</td>
        <td>Ram</td>
    </tr>
</table>

<p>We have bordered the table to help you comprehend the sample better.</p>

</body>
</html>


Tabular Rows



Every table row has a <tr> tag
at the beginning and a
</tr> tag at the end.

Table row is referred to as
tr.


A table can have as many rows as you like, as long as there are the same
amount of cells in each row.


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>TR components indicate table rows..</title>
</head>
<style>
    table, th, td {
      border:1px solid red;
  }
</style>
<body>

    <h2>TR components indicate table rows..</h2>

    <table style=“width:100%”>
      <tr>
        <td>Rishi</td>
        <td>Rasik</td>
        <td>Ram</td>
      </tr>
      <tr>
        <td>45</td>
        <td>12</td>
        <td>25</td>
      </tr>
    </table>

<p>We have bordered the table to help you comprehend the sample better.</p>

</body>
</html>




Table Headers



You might occasionally want your cells to act as table header cells. Use
the
<th> tag in those circumstances
rather than the <td> tag.

th stands for table header.


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table headers are defined by TH elements.</title>
</head>
<style>
    table, th, td {
      border:1px solid red;
  }
</style>
<body>

    <h2>Table headers are defined by TH elements.</h2>

    <table style=“width:100%”>
      <tr>
        <th>User 1</th>
        <th>User 2</th>
        <th>User 3</th>
      </tr>
      <tr>
        <td>Rasik</td>
        <td>Rishi</td>
        <td>Ram</td>
      </tr>
      <tr>
        <td>45</td>
        <td>12</td>
        <td>25</td>
      </tr>
    </table>


<p>We have bordered the table to help you comprehend the sample better.</p>

</body>
</html>

Rate this post

Categorized in: