HTML Tables

Web developers can use HTML tables to organize data into rows and columns.

Example:

Company NameContact PersonCountry Name
GOOGLESundar PichaiGermany
IBMArvind KrishnaChang Mexico
HCLC VijayakumarAustria

MICROSOFT
Satya NadellaUK
ADOBEShantanu NarayenCanada
TESLAElon MuskUSA

 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border:1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Company Name</th>
    <th>Contact Person</th>
    <th>Country Name</th>
  </tr>
  <tr>
    <td>GOOGLE</td>
    <td>Sundar Pichai</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>IBM</td>
    <td>Arvind Krishna</td>
    <td>Chang Mexico</td>
  </tr>
</table>

</body>
</html>

Try with example

 

Table Rows

A begins each table row and ends with a tag.

Table row is abbreviated as tr.

Example:

<table>
  <tr>
    <td>Company Name</td>
    <td>Contact Person</td>
    <td>Country Name</td>
  </tr>
  <tr>
    <td>GOOGLE</td>
    <td>Sundar Pichai</td>
    <td>Germany</td>
  </tr>
</table>

Try with example

 

In a table, you can have as many rows as you want, as long as the number of cells in each row is the same.

 

Table Headers

When you want your cells to be headers, instead of using the tag, use the tag:

Example :

Let the first row be table headers:

<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>

Try with example

The text in elements is bold and centered by default, but you can modify this with CSS.