Creating a table in HTML
To insert a table into your HTML document, use the <table> element. The <tr> tag divides a table into rows which are further divided into data cells using the <td> tag. <tr> is an abbreviation for table row while td stands for table data. Below is an example of html code that displays a table with headers and a few records.
<table border="1"> <thead> <tr> <th>No.</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Carter</td> <td>firstname.lastname@example.org</td> </tr> <tr> <td>2</td> <td>Peter Parker</td> <td>email@example.com</td> </tr> <tr> <td>3</td> <td>John Rambo</td> <td>firstname.lastname@example.org</td> </tr> </tbody> </table>
Formatting HTML tables
There are two attributes that you can use to adjust the whitespace in a table for an enhanced appearance. These are namely, cellspacing and cellpadding. Use the cellpadding attribute to adjust the whitespace between the boarder of a cell and its content. Cellspacing adjusts whitespaces between table cells. Below is an example that demonstrates the cellspacing and cellpadding attributes.
Spanning is a feature that is similar to cell merge in excel. It allows you to extend a column or a row over other datacells. Use the colspan and the rowspan attributes to span rows and columns as shown in the example below.