Select Chapter ❯
HTML Tutorial
- HTML Introduction
- HTML Editors
- HTML Main Tags
- HTML All Tags
- HTML Attributes
- HTML Formating
- HTML Comments
- HTML Links
- HTML Images
- HTML Tables
- HTML List
- HTML Iframes
- HTML Style
- HTML Javascript
- HTML Forms
- HTML Elements
HTML5 Tutorial
HTML Media
HTML Tables
It heps us to arrange data in rows and columns.It allow us to arrange any kind of data in rows and columns by using <table> tag to create table and inside this <tr> to create table rows and <td> to create columns or data cells.
Syntax for using table:
<table>
<tr>
<td></td><td></td>
</tr>
</table>
Example of Tables
<html> <body> <table border="1"> <tr> <td>Row1 Column1</td><td>Row1 Column2</td> </tr> <tr> <td>Row2 Column1</td><td>Row2 Column2</td> </tr> </table> </body> </html>
Result of above example
| Row1 Column1 | Row1 Column2 |
| Row2 Column1 | Row2 Column2 |
border="1"is used because just to add border across each cell you can make big borders by increasing the border value or you can hide the border by not writing in table tag.
Table Heading
It is used to put heading in table to determine the what kind of columns is
<html> <body> <table border="1"> <tr> <th>Name</th> <th>Course</th> </tr> <tr> <td>Rohit</td><td>BTech</td> </tr> <tr> <td>Shivam</td><td>BCA</td> </tr> </table> </body> </html>
Result of above example
| Name | Course |
|---|---|
| Rohit | BTech |
| Shivam | BCA |
Cellspacing and Cellpadding
Cellspacing attribute defines the width of the border and cellpadding represents the distance between cell borders and the content within a cell.
Example of Cellspacing and Cellpadding
<html> <body> <table border="1" cellspacing="10" cellpadding="5"> <tr> <th>Name</th> <th>Course</th> </tr> <tr> <td>Rohit</td><td>BTech</td> </tr> <tr> <td>Shivam</td><td>BCA</td> </tr> </table> </body> </html>
Result of above example
| Name | Course |
|---|---|
| Rohit | BTech |
| Shivam | BCA |
Rowspan,Colspan,bordercolor and bgcolor
rowspan is used to merge two or more rows,colspan is used to merge two or more columns into a single column and bgcolor is used to give background color to table.
Example of rowspan and colspan
<html> <body> <table border="1" bgcolor="red" bordercolor="blue"> <tr> <th>Name</th> <th>Course</th> </tr> <tr> <td colspan="2">Rohit</td><td>BTech</td> </tr> <tr> <td rowspan="2">Shivam</td><td>BCA</td> </tr> <tr> <td>Rishabh</td><td>BBA</td> </tr> </table> </body> </html>
Result of above example
| Name | Course | |
|---|---|---|
| Rohit | BTech | |
| Shivam | BCA | |
| Rishabh | BBA | |
Table Caption
It is used as a title of a table it is displayed at the top of the table.
Example of Table Caption
<html> <body> <table border="1"> <caption>This is the title of the table</caption> <tr> <td>Rohit</td><td>BTech</td> </tr> <tr> <td>Shivam</td><td>BCA</td> </tr> </table> </body> </html>
Result of above example
| Rohit | BTech |
| Shivam | BCA |
Table header,Table body,Table footer
head and foot is header and footer of the page and the body is the main content holder of the table.
Example of rowspan and colspan
<html> <body> <table border="1"> <thead> <tr> <td>Table header</td> </tr> </thead> <tbody> <tr> <td>Rohit</td><td>BTech</td> </tr> <tr> <td>Shivam</td><td>BCA</td> </tr> </tbody> <tfoot> <tr> <td>Table footer</td> </tr> </tfoot> </table> </body> </html>
Result of above example
| Table header | |
| Rohit | BTech |
| Shivam | BCA |
| Table footer | |
❮ PreviousNext ❯