HTML Tables

In HTML, a table is a structure that organizes data into rows and columns.

Tables are created using the <table> element, and the content of the table is defined using other HTML elements like <tr> (table row), <th> (table header), and <td> (table data/cell). Here's a basic example of an HTML table

Example

<!DOCTYPE html>
<html>
<title>Your Website Title<title>
<body>
<h2>Sample HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>City</th>
  </tr>
 <tr>
    <td>ABC pvt ltd.</td>
    <td>XYZ pvt ltd.</td>
    <td>MNO pvt ltd.</td>
  </tr>
  <tr>
    <td>Ranchi</td>
    <td>Patna</td>
    <td>Jamshedpur</td>
  </tr>
</table>


</body>
</html>

You can click on above box to edit the code and run again.

Output

Company	Contact	City
ABC pvt ltd.	XYZ pvt ltd.	MNO pvt ltd.
Ranchi	Patna	Jamshedpur

The <table> element is used to define the overall table.
Each row of the table is represented by the <tr> element.
Table headers (the labels for each column) are defined using the <th> element
Table data cells are defined using the <th> element.

<th> attribute in the <table> element is optional and adds a border to the table for better visibility; it's not typically used in production code.

Table Headers

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

Example

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Ram</td>
    <td>Mohan</td>
    <td>Ramesh</td>
  </tr>
  <tr>
    <td>10</td>
    <td>20</td>
    <td>30</td>
  </tr>
</table>

You can click on above box to edit the code and run again.

Output

Person 1	Person 2	Person 3
Ram	Mohan	Sohan
10	20	30

Table Rows

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

Example

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

You can click on above box to edit the code and run again.

Output

Emil	Tobias	Linus
16	14	10

Table Cells

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

td stands for table data.

Example


<table>
<tr>
<td>Row 1, Cell 1<td>
<td>Row 1, Cell 2<td>
<td>Row 1, Cell 3<td>
</tr>
</table>

You can click on above box to edit the code and run again.

Output

Row 1, Cell 1

Row 1, Cell 2

Row 1, Cell 3