HTML Table

Hello buddies! In this article, we will be going to learn about HTML Table. We cover your all query related to HTML Table.

What is HTML Table

The arrangement of data into rows and columns becomes possible with HTML tables.

Data that is organized into rows and columns is called a table (also known as tabular data). You may quickly and simply search up numbers in a table that show some sort of relationship between several sorts of data, such as a person’s age, the day of the week, or the schedule for a nearby swimming pool.

HTML Table Tags

TagDescription
<table>It determines a table.
<tr>It describes a table row.
<th>It designates a table header cell.
<td>It describes a table cell.
<tbody>It is used to organize the table’s body content.
<thead>It is utilized to organize a table’s header information.
<tfooter>It is utilized to organize table footer material.
<caption>The caption of the table is defined.
<colgroup>It designates a collection of one or more table columns for formatting.
<col>To provide column attributes for each column, use it together with the <colgroup> element.
HTML Table Tags

How to add a table heading in HTML?

Table heads are added using the symbol. In simple designs, the table heading is always in the top row, which means that the th> declaration will appear in the first table row, followed by the table’s actual contents. The text provided in the Heading is by default center-bold

 <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
</tr>
HTML

How to Add a Table Caption

Adding a caption to a table serves the primary purpose of describing the data that is shown there. The caption will always be centered by default and can be positioned either at the top or bottom of the table.

<caption> is the tag to use to add a caption to a table.

<!DOCTYPE html>
<html>
<head>
  <title>Table with Caption</title>
</head>
<body>

<table border="1">
  <caption>This is the table caption</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <!-- More table rows -->
</table>

</body>
</html>
HTML

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *