Html5 Tables tutorial for beginners

HTML5 Table tutorials

« Back Next »

learn HTML5 Table

HTML5 table

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; }

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.

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.

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: html tutorial for freshers <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>

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

« Back Next »

Data Science courses: Web Development

Online Courses: Include Certification

Quick Menu

Interviews

Linux Questions AWS Questions Python Questions Data Science Questions Artificial Intelligence Questions Asp.Net C# Questions MSSQL Questions

Tutorials

Datascience
Python
Learn Html
Learn CSS
Learn PHP
Learn Database

Examples

Learn Html
Learn CSS
Learn Html
Learn CSS

Follow Blog for Updates by Harisystems
AWS Questions and Answers Series1 by Harisystems
AWS Questions and Answers Series2 by Harisystems
AWS Questions and Answers Series3 by Harisystems
AWS Questions and Answers Series4 by Harisystems
AWS Questions and Answers Series5 by Harisystems
#courses #webdeveloper #elearning #programming #html5 #fullstack