Table Creation Tags in HTML
Working with Tables
In this lesson, we will learn how to create tables to display information in a tabular format in HTML.
What is Table in HTML
In HTML, a table is a structured grid of cells that can be used to display data or information in a tabular format. It consists of rows and columns, with each cell containing data or other HTML elements such as text, images, links, or even other nested tables. Tables can be used for various purposes, such as presenting data in a clear and organized way, creating forms, or laying out the page content.
To create a basic table structure in HTML, you will need to use the following tags:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Example</title>
</head>
<body>
<table border="1">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</table>
</body>
</html>The <table> tag is used to create a table, and the border attribute is used to set the width of the border. If the border attribute is not used, the table will be displayed without the border.
The <tr> tag is used to create a row within a table. The tr stands for table row.
The <td> tag is used to create a cell within a row. The td stands for table data.
Table Header and Footer
To create a header or footer for your table, you can use the following tags:
Example
<table border="1">
<thead>
<tr>
<th>Header Cell</th>
<th>Header Cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer Cell</td>
<td>Footer Cell</td>
</tr>
</tfoot>
</table>The <thead> tag is used to create a header for the table.
The <th> tag is used to create a header cell within the header row.
The <tbody> tag is used to create the body of the table.
The <tfoot> tag is used to create a footer for the table.
Table Caption
To add a caption to your table, you can use the <caption> tag. See the example given below.
Example
<table border="1">
<caption>Table Caption</caption>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>Note: If you want to use the caption tag in your table, it must be added immediately after the table tag.
Cell Padding and Cell Spacing
Cell Padding is used to set the amount of space between the content of each cell and the cell border. The cellpadding attribute is used to add cell padding on table cells.
Cell Spacing is used to set the amount of space between adjacent cells. The cellspacing attribute is used to add spacing between cells.
Example
<table border="1" cellpadding="16">
<caption>Cell Padding Example</caption>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
<br>
<table border="1" cellspacing="16">
<caption>Cell Spacing Example</caption>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>In the above example, each cell in the first table has 16 pixels of padding between its content and its border, and in the second table, there are 16 pixels of space between adjacent cells.
Width and Height Attribute
The width attribute can be used to specify the width of a table or table cell. The height attribute can be used to specify the height of a table or table row. See the example given below.
Example
<table border="1" width="500">
<tr height="100">
<td width="120">Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</table>In the above example, the width of the table is 500 pixel. The height of the first row is 100 pixel and the width of the first cell is 120 pixel.
Align Attribute
The align attribute can be used to align the table or its content horizontally left, right, center or justify. The default value of align attribute is left.
Example
<table border="1" align="center">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</table>
<table border="1" align="right">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</table>
<table border="1" width="500">
<tr align="center">
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td align="center">Table Cell 3</td>
<td align="right">Table Cell 4</td>
</tr>
</table>Background Color and Image
We can use the bgcolor attribute to set the background color of a table, row and cell.
Example
<table border="1" bgcolor="#0cffce">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr bgcolor="#fa8b68">
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
<tr>
<td bgcolor="yellow">Table Cell 5</td>
<td>Table Cell 6</td>
</tr>
<tr>
<td bgcolor="Chartreuse">Table Cell 7</td>
<td>Table Cell 8</td>
</tr>
</table>We can use the background attribute to set the background image of a table, row and cell.
Example
<table border="1" background="https://www.dremendo.com/html-tutorial/images/tile-image.jpg">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
<tr>
<td>Table Cell 5</td>
<td>Table Cell 6</td>
</tr>
<tr>
<td>Table Cell 7</td>
<td>Table Cell 8</td>
</tr>
</table>Spanning Rows and Columns
When creating a table in HTML, you may want to merge or span cells across multiple rows or columns to create a custom table. This can be done using the rowspan and colspan attributes in the HTML table.
To span rows, you can use the rowspan attribute and set it equal to the number of rows you want the cell to span.
To span columns, you can use the colspan attribute and set it equal to the number of columns you want the cell to span.
Example
<table border="1">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
<tr>
<td>Table Cell 5</td>
<td>Table Cell 6</td>
<td>Table Cell 7</td>
<td>Table Cell 8</td>
</tr>
<tr>
<td>Table Cell 9</td>
<td>Table Cell 10</td>
<td>Table Cell 11</td>
<td>Table Cell 12</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td colspan="4">Table Cell 1</td>
</tr>
<tr>
<td rowspan="2">Table Cell 5</td>
<td>Table Cell 6</td>
<td>Table Cell 7</td>
<td>Table Cell 8</td>
</tr>
<tr>
<td>Table Cell 10</td>
<td>Table Cell 11</td>
<td>Table Cell 12</td>
</tr>
</table>In the above example, we have removed the cell 2, 3, and 4 from the second table and span the cell 1 equal to 4 columns to make it a single merged cell. We have removed cell 9 and span cell 5 equal to 2 rows to make it a single merged cell.
Nested Tables
You can also create a table inside another table which is known as nested table. See the example given below.
Example
<table border="1">
<tr>
<td>
<table border="1">
<tr>
<td>Nested Cell</td>
<td>Nested Cell</td>
</tr>
<tr>
<td>Nested Cell</td>
<td>Nested Cell</td>
</tr>
</table>
</td>
<td>Table Cell</td>
</tr>
</table>id Attribute
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to a table, tr, td, th, thead, tbody and tfoot tag and use it to apply a specific style to that particular tag.
Example
<table border="1" id="data">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
</table>Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class Attribute
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for any tag that is used in a table to apply a specific style to all the tags that belong to a particular class.
Example
<table border="1">
<tr>
<td class="info">Table Cell 1</td>
<td class="info">Table Cell 2</td>
</tr>
</table>Note:The class attribute can be used on any tag to assign a group name to the tag.
style Attribute
The style attribute can be used to apply inline css styles to a tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<table border="1">
<tr style="color: red">
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
</table>The style="color: red" will change the color of the tr tag to red color.
title Attribute
The title attribute can be used to add a tooltip or additional information to table, tr and td tags, which will only appear when the user places the mouse cursor on the tags.
Example
<table border="1" title="This is a simple table">
<tr>
<td title="This is table cell 1">Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
</table>