HTML Div, span, class, and ID

html tables

Html table can be created using <table>...</table> tags and it a is paired tags as we have made mention earlier in previous post ,you can use <table> tag to create a rows in your table use < tr> and use < td> to write a data < th> is use as table head they are all paired tags

example:<table align="center">
<tr> <td>Books </td></tr>
<tr> <td> Pencils</ td> </tr>
<tr> <td>Bags</td> </tr>
</table>

here is the output

Books

Pencils

Bags

table heading

<table raw="1" border="1" align="center"> <tr>
<th></th>
<th scope="col">pupils</th>
<th scope="col">Student</th>
</tr>
<tr>
<th scope="row">Number in class:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total fees:</th>
<td>N2000</td>
<td>N2675</td>
</tr>
</table>

here is output

	pupils	Student
Number in class:	120	135
Total fees:	N2000	N2675

table head, body, and footer.

A table also can have a table head which is <thead>, table body which is written as <tbody>,and finally table footer which is written as <tfoot>,here it is:

<table raw="1" border="1" align="center"> <thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th>1st January</th>
<td>250<td>
<td>36</td>
</tr>
<tr>
<th>2nd January</th>
<td>285</td>
<td>48</td>
</tr>
<tr>
<th>31st January</th>
<td>129</td>
<td>64</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td> </tr> </tfoot> </table>

here is output:

Date	Income	Expenditure
1st January	250	36
2nd January	285	48
31st January	129	64
Total	7824	1241

table colspan and rowspan

colspanThe colspan attribute can be used on a <th> or <td> element and indicates how many columns that cell should run across

rowspanThe rowspan attribute can be used on a <th> or <td> element to indicate how many rows a cell should span down the table.

example: <table raw="1" border="1" align="center"> <tr>
<th></th>
<th colspan="3">pupils</th>
<th colspan="2">Student</th>
</tr>
<tr>
<th>Number in class:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th>Total fees:</th>
<td>N2000</td>
<td>N2675</td>
</tr>
</table>

here is output

	pupils			Student
Number in class:	120	135
Total fees:	N2000	N2675

table with caption

A caption tag will serve as a title or explanation for the table and it shows up at the top of the table. A table caption is is created with a tag <caption> and it is paired tags

Here it is:
<table raw="1" border="1" align="center">
<caption>learner record</caption>
<tr>
<th></th>
<th colspan="3">pupils</th>
<th colspan="2">Student</th>
</tr>
<tr>
<th>Number in class:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th>Total fees:</th>
<td>N2000</td>
<td>N2675</td>
</tr>
</table>

hereis our output

learner record

	pupils			Student
Number in class:	120	135
Total fees:	N2000	N2675

Share Share Tweet Share Share Share

Home

Thanks For You Reading The Post We are very happy for you to come to our site. Our Website Domain name http://hausanovelspdf.blogspot.com/.