An HTML table is a way of displaying data in rows and columns. It is a popular way of organizing and presenting information on websites. Tables are widely used to display financial data, schedules, pricing, and other types of data that need to appear organized. This tutorial will guide you on how to create an HTML table.
Creating an HTML table
To create an HTML table, you must first understand the basic structure. The table comprises three main tags: <table>
, <tr>,
and <td>
. The <table>
tag defines the table, the <tr>
tag defines the table rows, and the <td>
tag defines the table cells.
Here's an example of a basic HTML table:
Example:
<table>
<tr>
<td>Column1 in Row1</td>
<td>Column2 in Row1</td>
</tr>
<tr>
<td>Column1 in Row2</td>
<td>Column2 in Row2</td>
</tr>
</table>
HTML Table Tag
Tables can be created within a web page using the <table>
tag. Within it, the <tr>
, which is table-row, is used for creating rows of the table. Again the <td>
tag, which is table-data, is used for adding data to cells.
Example:
<table border="1">
<tr>
<td>Column1 in Row1</td>
<td>Column2 in Row1</td>
</tr>
<tr>
<td>Column1 in Row2</td>
<td>Column2 in Row2</td>
</tr>
</table>
Heading for Table Data
The <th>
tag is used within the <table>
tag for defining the heading for your table data. It is used as a replacement for the <td>
tag, where the table's data must be inserted as a heading.
Example:
<table border="1">
<tr>
<th>Column1 Heading</th>
<th>Column2 Heading</th>
</tr>
<tr>
<td>Column1 in Row1</td>
<td>Column2 in Row1</td>
</tr>
<tr>
<td>Column1 in Row2</td>
<td>Column2 in Row2</td>
</tr>
</table>
You can notice that the text under the table heading gets bold by default.
COLSPAN and ROWSPAN Attribute
These two attributes of the <td>
tag are used for merging two or more columns into a single column. It is useful in cases where you want to show mixed data universally for all the headings.
Example:
<table border="1">
<tr>
<th>Column1 Heading</th>
<th>Column2 Heading</th>
</tr>
<tr>
<td>Column1 in Row1</td>
<td>Column2 in Row1</td>
</tr>
<tr>
<td colspan="2">Column1 in Row2</td>
</tr>
</table>
Example:
<table border="1">
<tr>
<th>Column1 Heading</th>
<th>Column2 Heading</th>
</tr>
<tr>
<td rowspan="2">Column1 in Row1</td>
<td>Column2 in Row1</td>
</tr>
<tr>
<td>Column2 in Row2</td>
</tr>
</table>
Cell-padding and Cell-spacing Attributes
These two attributes of the <table>
tag provides white spaces to your table cells from both sides. This is mainly done to beautify and make data within your cells readable. This is how you have to provide value to these attributes:
<table border="2" cellpadding="6" cellspacing="6">
Table Background and Border Color
HTML also allows you to provide background color or image to your table. These are done by the bgcolor and background attributes of the <table>
tag. Moreover, you can set the color to borders as well. This is done by the bordercolor attribute of the <table>
tag. Here's how it is done:
<table border="1" bordercolor="aqua" bgcolor="red">
Nesting of Tables
You can add tables within another table, i.e., cell. Code snippet for nesting HTML:
Example:
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<td>
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
</tr>
</table>
</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
</table>
</td>
</tr>
</table>