DEV Community

johar ali
johar ali

Posted on

What is the table in HTML?

In HTML, table tag is used to create a table. tr is used to define rows in an HTML table. th tag is used to define headings in HTML table. Headings in HTML Table are by default bold and middle. In this, td tag is used to define the table cell.

Table is made using three elements. Rows, columns and cells

Rows – We call the boxes made of horizontal lines in the table as rows. A row is formed by two or more horizontal lines.

Columns – We call the boxes standing in the table as columns. A row is formed by two or more vertical lines.

Cell – When rows and columns collide, a cell is formed.

HTML tables are used to display data in a structured grid format. They consist of rows and columns, with cells that can contain various types of content, such as text, images, links, or other HTML elements. Tables are created using a combination of HTML tags, primarily the table, tr, th, and td tags. Here's a basic overview of how to create HTML tables:

Table Element (table): The table tag is used to define the table itself. It acts as a container for all the other table elements.

Table Row Element (tr): The tr tag is used to define table rows. You place your data within these rows. Each row can contain one or more table data cells (td) or table header cells (th).

Table Header Cell (th): The th tag is used to define header cells in a table. Header cells are typically bold and centered, and they provide labels or titles for the columns or rows. They are often used in the first row or the first column to provide context for the data.

Table Data Cell (td): The td tag is used to define data cells in a table. These cells contain the actual content or data you want to display.

Here's a simple example of an HTML table:

<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>
Enter fullscreen mode Exit fullscreen mode

This code creates a 2x2 table with headers in the first row and data in subsequent rows.

Additional attributes and styling can be applied to tables and their elements. For example, you can use the border attribute to add borders to your table or use CSS to control the appearance, spacing, and layout of your tables.

Here's an example of a table with some additional attributes:

<table border="1" cellpadding="10">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
   </tr>
   <tr>
     <td>Jane</td>
     <td>30</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

In this example, the border attribute adds a border to the table, and cellpadding sets the padding within the cells.

HTML tables can become more complex by including features like colspan (to merge cells horizontally) and rowspan (to merge cells vertically) or by using CSS to style them to your preferences. They are commonly used to present data in a tabular format on websites.

Top comments (0)