You can use tables to render data in the structured form. By adding tables to your webpage, you can make it even more structured and attractive. To create tables in HTML, you use <table> tags. This tag has a sub tag called <tr> table row tag. <tr> tag also has a sub tag called <td> table data tag.
Any table is made of row and columns. Therefore, to create a row after <table> tag, you use <tr> tag. The more you want to create the rows, define the same <tr> tag.
After creating rows you create columns in rows. The <td> tag is used to create columns. You define as many tags as you want to create <td> tags.
Creating Tables in HTML
To create a table, you should always keep in mind the tag order. First comes the <table> tag. After this comes the <tr> tag. Then there comes <th> and <td> tags. <th> and <td> tags will always come in <tr> tags.
<table> - define a table
<tr> - define a table row
<td> - define a table data
<th> - define a table heading
<caption> - define a table caption
There is an example of a table structure as below.
There is an example of a table structure as below.
The above script generates the webpage as below.
One thing you should keep in mind is that unless you define the border of the table through the border attribute, the boundary of the table will not display.
Creating Table Headings
You can also create headings in the first row of tables. The heading is bigger than the rest of the text of the table. For example, if you are creating a table that stores information about employees, you can create headings such as Name, age, address and contact no. etc.
The <th> tag is used to create heading. This is called a table heading tag. The text you use in this tag is shown on the webpage as a heading. This tag is used inside the <tr> tag. An example of this is being given below.
After running the given script, webpage will generate as below.
Table Attribute
There are two types of attributes here.
1. COLSPAN:- attribute to make a cell span with many columns
COLSPAN Attribute
If you want to divide the column of one row in more than one column. For this, you define colspan attribute in the previous column. In which column you define the colspan, it replaces the same column of one column. An example of this is being given below.
See above example, Eve has pass 2 mobile numbers but Michal has only one mobile number. If you normally create a table, then a column in the Michal row will be left empty. In such a way the table will not look good. Such as you can see in the John row, there is a column which is empty because there is no calspan define.
If you want to have two columns of the row with one column in the row, then you will have to use "colspan" attribute. As I have covered two columns of the row with Michal. This script generates the output as below.
ROWSPAN Attribute
ROWSPAN attribute is also like a colspan. You define it in the <tr> tag. The value you give for this attribute replaces with the number of rows into one row. Example of this attribute is given as below.
The above script will give the output as below.
Naming the Table
If you want to give a name of the table, you will have to use the <caption> tag for this. It is defined after the <table> tag. An example is given below.
The above script will generate the given web page.
Hopefully, this "HTML Tutorial - Table” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips.
Previous:- How to use Anchor Tag in HTML? Next:- How to use Image Tag in HTML?
Posts
0 comments:
Post a Comment
Thank you for reading the post.