HTML Tables TAGS

By Degree Corners On Aug 30, 2024

HTML tables : allow web developers to arrange data into rows and columns.

We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.

Tag	Description
<table>	It defines a table.
<tr>	It defines a row in a table.
<th>	It defines a header cell in a table.
<td>	It defines a cell in a table.
<caption>	It defines the table caption.
<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.
<tfooter>	It is used to group the footer content in a table.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
  <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

<table>
  <tr>
  <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

<table>
  <tr>
  <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
  <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Table Headers

you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

<table>
  <tr>
  <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
  <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
  <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

HTML Table with Border:

HTML Border attribute:

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

and tag.html tables tags tag