html table tags | table in html | create table with html #html #htmlcss

HTML TABLE TAGs

HTML provides several tags for creating tables and organizing tabular data. The main tags used to construct tables in HTML are:
<table>: This tag represents the entire table.
<tr>: This tag defines a table row.
<th>: This tag defines a table header cell (typically used in the first row).
<td>: This tag defines a table data cell.
Here's an example of a simple HTML table structure

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

we have a table with two columns and three rows. The first row contains the table headers (<th>), and the subsequent rows contain the table data (<td>).

You can also use additional tags to structure more complex tables:

<thead>, <tbody>, <tfoot>: These tags can be used to group the table header, body, and footer sections, respectively. They provide semantic structure to the table, but their usage is optional.

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Footer content</td>
    </tr>
  </tfoot>
</table>


<caption>: This tag is used to provide a title or a caption for the table. It should be placed immediately after the opening <table> tag.

<table>
  <caption>My Table</caption>
  <!-- table content goes here -->
</table>

<colgroup> and <col>: These tags allow you to apply styles or attributes to entire columns of the table.


<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col>
  </colgroup>
  <!-- table content goes here -->
</table>

These are the basic HTML tags used for creating tables. You can customize the appearance of the table and its elements using CSS to achieve the desired visual layout and style.

Comments

Popular posts from this blog

html audio tag | audio in html | how to add audio in html #html #htmlcss