Home HTML Tutorial for beginners 23 HTML Table

23 HTML Table

16
0

HTML table tag can be used to create a table. We know a table may have one or many rows. HTML tr tag can be used to create table row. A row may have one or many columns. HTML td tag can be used to create table data or table column. With in a table column we can place text, image, list or other table also. HTML th tag can be used to create table heading. The text with in this tag is centered and bold by default. Caption element can also be used with in table tag to show a caption at the top of the table.

Optional Table Attributes

cellpadding = “value” Specifies the distance between cell boundary and content of cell
cellspacing = “value” specifies space between two consecutive cell boundaries
colspan = “value” specifies the number of columns to merge
rowspan = “value” specifies the number of rows to merge
bgcolor = “colorname” specifies the background color of table
border = “value” specifies the border width of the table
bordercolor = “value” specifies the border color
background = “URL” can set a background image for the table
width = “value” specifies the width of the table
height = “value” specifies the height of the table

Tables can be broken into three sections :

  • <thead> – Table Header
  • <tbody> – Table Body
  • <tfoot> – Table Footer

Normally tbody contains primary content of table. thead contains column headings and tfooter contains column summaries. Table header is always displayed first then table body and at last table footer despite of its position in the program.

Please watch below example : 

<!doctype HTML>
<head>
</head>
<body>
<table border=1>
<thead>
<tr>
<th>Roll</th>
<th>Name</th>
<th>marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Subrat Dash</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Ramesh Jena</td>
<td>83</td>
</tr>
<tr>
<td>3</td>
<td>Suresh Mishra</td>
<td>55</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total Marks of All students</td>
<td>223</td>
</tr>
</tfoot>
</table>
</body>
</html>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here