Html5 Lists tutorial for beginners

HTML5 Table tutorial

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.


html Table Customize Border Space

Between the cells we can create border space by using this CSS property
This CSS property border-spacing will provide this facility will see on example.

table { border-spacing: 2px; } In above example 2px indicates that space to be provide, wish to change the px value and check the output while practicing.


html5 Table Span - Columns

In HTML table some we require to merge the two or more columns for column title to be write For the purpose of this in attribute colspan with value will do this facility.

Example: <table style="width:90%"> <tr> <th>Student</th> <th colspan="2">Marks</th> </tr> <tr> <td>English</td> <td>78</td> <td>80</td> </tr> <tr> <td>Maths</td> <td>98</td> <td>88</td> </tr> </table>


html5 Table Span -Rows

In HTML table some we require to merge the two or more rows for rows title to be write For the purpose of this in attribute rowspan with value will do this facility.

Example: <table style="width:90%"> <tr> <th>Student</th> <th>Marks</th> </tr> <tr> <th rowspan="2">English</th> <td>78</td> <td>80</td> </tr> <tr> <th rowspan="2">Maths</th> <td>98</td> <td>88</td> </tr> </table>


html5 Table Caption Adding

For tables we can also add captions using <caption> tag: Example: <table style="width:90%"> <caption>Time table</caption> <tr> <th>WeekDay</th> <th>Sub</th> </tr> <tr> <td>Monday</td> <td>Eng</td> </tr> <tr> <td>Tuesday</td> <td>Maths</td> </tr> </table>

html5 Review

We discussed <table> tag element for table creation We discussed <tr> tag element for table row creation We discussed <td> tag element for table column/data creation We discussed <th> tag element for table heading creation We discussed <caption> tag element for table caption creation We discussed CSS padding property for table cell padding We discussed CSS text-align property for table cell text alignment We discussed CSS border-spacing property for table cell space setting We discussed CSS border property for table border creation We discussed CSS border-collapse property to collapse cell borders We discussed colspan attribute for table cell span many columns We discussed rowspan attribute for table cell span many rows

Harisystems is optimized for learning, testing and training. courses are designed to be simplified to improve reading and basic understanding for beginners to expert level. Tutorials and examples are constantly reviewed to avoid errors, however we cannot warrant full correctness of all content. if any found need to correct write us at info@harisystems.com. we Harisystems is not responsible for any with this tutorials, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2007-2020 by Harisystems. All Rights Reserved.
Copyright © Harisystems 2020