We can create a table in html by using <htmt></htmt> tag.
with in table tag we use <tr> to create new table row.
inside tr we use <td> tag to specify data value.
to provide table header <th> tag is used
One table can contain multiple table rows and each row can contain multiple table data.
Syntax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <table> <tr> <th>...</th> <th>...</th> </tr> <tr> <td>.....</td> <td>......</td> </tr> <tr> <td>.....</td> <td>......</td> </tr> ...... </table> |
<th> is optional it is used to provide HTML Table with Header
Example
Sr No | Name | City |
---|---|---|
1 | Manish | Bhilai |
1 | Mohan | Bhopal |
1 | Ram | Banglore |
For providing data heading we use <th> tag
HTML Table with border
In above table we have not provided table border to provide HTML table with border we can use border attribute with border tag as below
table border=" 1|0"
0 specify no border around the table
1 specify border around the table
HTML Border attribute in not support by HTML 5.
Insted of border attribute use CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table border="1"> <tr> <th>User Name</th> <th>Mailid</th> </th> <tr> <td>Ram</td> <td>ram@abc.com</td> </tr> <tr> <td>Mohan</td> <td>mohan@abc.com</td> </tr> <tr> <td>Shyam</td> <td>shyam@abc.com</td> </tr> </table> |
User Name | Mailid |
---|---|
Ram | [email protected] |
Mohan | [email protected] |
Shyam | [email protected] |
HTML Table border with CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <style> table, th, td { border: 1px solid blue; } </style> <table> <tr> <th>Name</th> <th>Mailid</th> </th> <tr> <td>Ram</td> <td>ram@abc.com</td> </tr> <tr> <td>Mohan</td> <td>mohan@abc.com</td> </tr> <tr> <td>Shyam</td> <td>shyam@abc.com</td> </tr> </table> |
HTML Table With Caption
To provide table caption <caption> tag is used is should be used below the <table> tag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <table border="1"> <caption>User Name and Mailid details of user</a> <tr> <th>User Name</th> <th>Mailid</th> </th> <tr> <td>Ram</td> <td>ram@abc.com</td> </tr> <tr> <td>Mohan</td> <td>mohan@abc.com</td> </tr> <tr> <td>Shyam</td> <td>shyam@abc.com</td> </tr> </table> |
User Name | Mailid |
---|---|
Ram | [email protected] |
Mohan | [email protected] |
Shyam | [email protected] |
HTML Table Grouping Tag
<thead>, <tbody> and <tfooter> tags are used for grouping table rows <thead> is used to group table header
<tbody> is used to group table body
<tfooter is used to group table footer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <table> <thead> <tr> <th>Sr no</th> <th>Item</th> <th>Quantity</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Cack</td> <td>1</td> <td>150</td> </tr> <tr> <td>2</td> <td>Toast</td> <td>1</td> <td>80</td> </tr> <tr> <td>3</td> <td>Biscuit</td> <td>2</td> <td>50</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td></td> <td></td> <td>$180</td> </tr> </tfoot> </table> |
Q Which tag allows you to add a row in a table?
tr rag allows us to add a row in a table
Q Can a data cell contain images in html
yes We can include images in HTML data cell
Q what is the use of “border ” attribute of table tag?
“border ” attribute of table tag is used to set table border