Html5 Lists tutorial for beginners

HTML5 Table tutorial

« Back Next »

HTML Table

HTML5 Table creation

Table represents rows and columns will see how in HTML.

<table> tag in HTML will provides mainly table structure of rows columns as well as many properties attributes are included like table header for headings and CSS can also apply for more style table designs well see one by one Here for table creation we use <table> tag inside the tag for Table header we use <th> similarly for table rows creation <tr> and <td> for table data/cell tags respectively. We will see on example below Example: <table style="width:90%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Country</th> </tr> <tr> <td>John</td> <td>Smith</td> <td>UK</td> </tr> <tr> <td>Pandey</td> <td>Bill</td> <td>USA</td> </tr> </table>

Table Border Creation

Table Border

In HTML form for a table require a boarder by using this boarder attribute with value to create a boarder on HTML form using CSS boarder property.

Example: table, th, td { boarder: 1px solid gray; } Above example defined table and table cells similarly we need to define boarders like this table and tables also.

Table Collapsed Border Creation

Collapsed Border

By default table borders will display 2 lines, this can also possible to collapse into one border by using CSS property that is border-collapse : collapse as value , will see more on example

Example: table, th, td { boarder: 1px solid gray; border-collapse: collapse; }

learn HTML5 Table Add Padding to Cell

In this property of CSS Padding specifies the space between cell and borders surrounding it.
If it’s not specified any padding with values it will displayed without padding.

Example: th, td { padding: 10 px; }

html5 Table align Headings

In HTML table headings are center alignment and bold it will displays
In CSS there is a property called text-align which can align the text alignment as we define the property value. Will see on example .

Example: th { text-align: right; } (or) th { text-align: left; } Above two examples says that first one will display on text alignment right and second example will display left alignment, observe while practicing.