HTML Tables
In this Tutiongo tutorial you will learn about how to display tabular data using HTML tables in a web page.
HTML table allows you to arrange tabular data into columns and rows. They are very commonly used to display tabular data like product customer's details, listings, financial reports etc.
You can create a table using the <table> element. Inside the </table> element, you can use the <tr> elements to create your rows, and to create columns you can use the <td> elements. You can also defined a cell as a header for a group of the table cells using the <th> element (as a heading) .
The following some sample how to create basic structure of a table.
| Name | Age | Country |
|---|---|---|
| Arun | 22 | Germany |
| Varun | 35 | Mexico |
| Ram | 17 | Austria |
| Arvind | 20 | UK |
| kiran | 25 | Canada |
| Priya | 33 | Italy |
HTML Table Example :
So, tables don't have any borders by default web page. You can use the CSS property to add some borders to the tables. Also, the table cells are sized enough to fit the contents by default. To add more space around the content of the table cells you can use the CSS padding property.
The following style rules add a some pixel border to the table and some of padding to its cells.
HTML Table Example :
By default, borders around the cells and their table are separated from each other. But you can collapse them into one border by using the property border-collapse on the <table> element.
Also, text inside the <th> elements are displayed by default in bold font, aligned horizontally center in the cell . You chan change the default alignment by using the CSS text-align property.
The following addstyle rules collapse property the table borders and align the table header text to left.