x
Home
html

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.


NameAgeCountry
Arun22Germany
Varun35Mexico
Ram17Austria
Arvind20UK
kiran25Canada
Priya33Italy



HTML Table Example :

<table>
    <tr>
        <th>Name</th>
        <th>age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Arun</td>
        <td>22</td>
        <td> Germany </td>
    </tr>
 <tr>
        <td> Varun </td>
        <td> 35 </td>
        <td> Mexico </td>
    </tr>
</table>


Try it Yourself



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 :

<style>
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}
</style>



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.


HTML Table Example :

<style>
table {
    border-collapse: collapse;
}
th {
    text-align: left;
}
</style>


Defining a Table Header, Body, and Footer