Tables

How Can We Help?
< All Topics

Tables

HTML Tables are used to organise information into rows and columns.

In HTML tables you can arrange data such as text, images, or links. Using Tables you can get better formatting of data.

List of Table Tags

Attribute Description Syntax & Example
Table Tag Used to define a table. All other table tags and data are placed within the Table tag. <table></table>
Table Heading Used to define table heading row. Mostly used for the first table row. <th></th>
Table Row Used to define each table row. <tr></tr>
Table Data Used to define table data in cells <td></td>

Example of Simple HTML Table:

HTML Table is created using <table> tag. All other table tags are placed under this tag.

The first row often contains heading in tables. A row starts with <tr> tag and then each heading is created using <th> tag for each column.

Then we create another row for data. Again, A new row starts with <tr> tag while data is created using <td> tag for each column.

<html>
<body>
<table border="1">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <th>101</th>
    <th>Robin</th>
    <th>Maths</th>
  </tr>
  <tr>
    <th>102</th>
    <th>John</th>
    <th>English</th>
  </tr>
</table>
</body>
</html>

HTML Table Tag & Attributes

You can make some changes in Table styles using the given attributes.

For example, the above simple html table program has a border attribute that draws a border around the table. Here, is the list of common table attributes.

HTML Table Attributes

Attribute Description Syntax & Example
Border used to specify borders around the table & cells border=”2″
Cell Padding specify the amount of spacing between the cell border and cell content. cellpadding=”5″
Cell Spacing specify the amount of spacing between two adjacent cells. cellspacing=”3″
Width used to set the width of the table. width=”80%”
align used to set the alignment of the table horizontally. align=”center”
bgcolor used to set the background color of the table. bgcolor=”blue”
background used to set the image in the table background. background=”image.jpg”

Example using Table Attributes

Here is a simple example using various table attributes.

<!DOCTYPE html>
<html>
<head>
<title> Table Attributes - xyz.com </title>
</head>
<body>

<table width="80%" border="2" bgcolor="skyblue" align="center" cellspacing="3" cellpadding="5">
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Robin</td>
    <td>Delhi</td>
    <td>9876459089</td>
  </tr>
  <tr>
    <td>Rocky</td>
    <td>New York</td>
    <td>9876459089</td>
  </tr>
</table>
</body>
</html>

Basic HTML Page layout using table tag

A web page layout is often divided into multiple columns. Then these columns are treated as different sections of data.

There are two most popular ways to create those columns in html page. One way is using <div> tag and another way is using HTML <table> tag.

Most of the website layout has one common header area where we place the website logo or tagline (and sometimes the menu as well). Then we have the main content section divided into two or three columns.

The bottom of the webpage contains a common footer section, where we can place a logo, copyright statement, menu, or some other content.

In two columns we have one left or right sidebar area and one content area. In three columns page design, we have a left sidebar area, a main content area, and then one right sidebar area.

Creating an HTML page layout using table tags

Let us create a two-column layout along with the header and footer area using an HTML table.

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Layout using Tables</title>
</head>
<body>
<table width="90%" border="1"  align="center">
  <tr>
    <td colspan="2" bgcolor="green">
      <h1>Website Title or Tagline</h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="lightblue" width="30%">
      <b>Fruit Menu</b>
      Orange<br />
      Banana<br />
      Apple<br />
      Grapes
    </td>
    <td bgcolor="orange" width="60%" height="200">
        This is the main content area.
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="sky blue" align="center">
      Copyright © 2023 xyz.com
    </td>
  </tr>
</table>
</body>
</html>

Table of Contents