Home >> html >> HTML Tables

HTML Tables

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

Example:

Company Name	Contact Person	Country Name
GOOGLE	Sundar Pichai	Germany
IBM	Arvind Krishna	Chang Mexico
HCL	C Vijayakumar	Austria
MICROSOFT	Satya Nadella	UK
ADOBE	Shantanu Narayen	Canada
TESLA	Elon Musk	USA

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

-Advertisement-