Home » Learn » HTML Tutorial » HTML Tables

HTML 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

AttributeDescriptionSyntax & Example
Table TagUsed to define table. All other table tags and data placed within Table tag.<table></table>
Table HeadingUsed to define table heading row. Mostly used for first table row.<th></th>
Table RowUsed to define each table row.<tr></tr>
Table DataUsed 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.

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 given attributes.

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

HTML Table Attributes

AttributeDescriptionSyntax & Example
Borderused to specify border around the table & cellsborder="2"
Cell Paddingspecify amount of spacing between cell border and cell content.cellpadding="5"
Cell Spacingspecify amount of spacing between two adjacent cells.cellspacing="3"
Widthused to set the width of the table.width="80%"
alignused to set the alignment of table horizontally.align="centre"
bgcolorused to set the background color of the table.bgcolor="blue"
backgroundused to set 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 - TutorialsClass.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>

Important Links

Basic HTML Page layout using table tag

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.