How to Make Tables Using HTML Code

To display data clearly on your website, you need to use tables. Usually a table contains multiple rows and multiple columns. When drawing a table using HTML code, you have to draw the table row by row, and not column by column.

The HTML elements commonly used for creating tables are

<table></table>
<tr></tr>
<td></td>

The <table> element is for making a table.
The <tr> is for making a row inside a table.
The <td> is for making a cell inside a row.

Here is an example of HTML code for creating a simple table.

<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<td>C</td>
<td>D</td>
<tr>
</tr>
</table>

You can also use HTML code to build fancy-looking tables. Let me show you some example below.

To make a table with headings, you need to use the <th></th> element. The use of the <th> element is similar to that of the <td> element. You have to use it inside the <tr> element. In order to show whether the heading is meant for the row or for the column, you have to use the scope attribute with the <th> element. If the value of the scope attribute is col, it is for the column; if it is row, it is for the row. See the example below.

<table>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<th>Price</th>
<td>$10</td>
<td>$15</td>
</tr>
<tr>
<th>Total</th>
<td>$20</td>
<td>$25</td>
</tr>
</table>

Tip: If the cell is empty, you still have to use either <td></td> or <th></th>, but you just leave the content blank as shown in the example above.

If you need to create a table containing cells spanning multiple rows or columns, you can use the colspan or rowspan attribute with the <th> or the <td> element.
For example, colspan="2" means the cell spanning 2 columns; rowspan="3" means the cell spanning 3 rows.

To make a very long table, you need to use <thead></thead>, <tbody></tbody> and <tfoot></tfoot> elements to divide your table into header, body and footer sections. Let us see an example.

<table>
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
</thead>
<tbody>
<tr>
<th>Price 1</th>
<td>$10</td>
<td>$15</td>
</tr>
<tr>
<th>price 2</th>
<td>$20</td>
<td>$25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>$30</td>
<td>$40</td>
</tr>
</tfoot>
</table>

You can also use attributes like bgcolor, width, cellpadding, cell spacing to control the format of the table. However, it is more efficient to control your site's appearance using CSS than HTML attributes. So when building your website, you should avoid using these attributes. Instead, you should use CSS to control the appearance of any element on your site.