<table>
- Used to define table. <table>
- Table consists following elements.
- <th> ,<tr> , <td> ,<caption> ,<col> ,<colgroup> ,<thead> ,<tfoot> ,<tbody>
- Table consists following attributes.
- align
- can be "left" , "right" ,"center"
- border
- defines which lines used to draw the table(in pixel)
- default no lines are drawn.
- width
- default it is in pixels.
- can give as a percentage of the window.
- If not specified, the table is only as wide as needed to display cell contents.
- height
- default it is in pixels.
- can give as a percentage of the window.
- bgcolor
- background color
- in HEX or as a name color
- cellpading
- it is in pixels(space) between content and its border
- cellspacing
- it is in pixels(space) between cells.
<thead>
- Used to group header content in the table.
- Browser can use these elements to enable scrolling of the table body independently of the header and footer.
- When printing a large table that spans multiple pages , these elements can enable the table header and footer to be printed at the top and bottom for each page.
- header contain following elements
- as a child of <table>
- after any <colgroup> , <caption>
- before any <tbody> ,<tfoot> , <tr>
- <thead> element must have one or more <tr> tags inside.
<tr>
- Used to define row in the table.
- Contains one or more <th> or <td> elements.
- Row contains following attributes
- align
- controls horizontal alignment of text in cells.
- can be "left" , "right" ,"center"
- valign
- controls vertical alignment of text in cells.
- can be "top" , "bottom" ,"middle"
- nowrap
- instructs the browser not to wrap the text from within the cells.
<th>
- Used to define header cell in the table.
- Contains header information.
- Bold and centered by default.
- Called as header cell.
<td>
- Used to define standard cell in the table.
- Contains data.
- Regular and left-aligned by default.
- Called as standard cell.
- Column contains following attributes
- align
- controls horizontal alignment of text in cells.
- can be "left" , "right" ,"center"
- valign
- controls vertical alignment of text in cells.
- can be "top" , "bottom" ,"middle"
- nowrap
- instructs the browser not to wrap the text from within the cells.
- width
- can be given as percentage of the table width
- height
- gives minimum height for cell.
- colspan
- cell to span multiple columns
- rowspan
- cell to span multiple rows
<tbody>
- Used to group the body content in the table.
- Browser can use these elements to enable scrolling of the table body independently of the header and footer.
- When printing a large table that span multiple pages , these elements can enable the table header and footer to be printed at the top and bottom for each page.
- header contain following elements
- as a child of <table>
- after any <colgroup> , <caption> , <thead>
<tfoot>
<tfoot>
- Used to group footer content in the table.
- Browser can use these elements to enable scrolling of the table body independently of the header and footer.
- When printing a large table that span multiple pages , these elements can enable the table header and footer to be printed at the top and bottom for each page.
- header contain following elements
- as a child of <table>
- after any <colgroup> , <caption> , <thead>
- before any <tbody> , <tr>
NOTE :- <thead> , <tbody> ,<tfoot> elements will not affect the layout of the table by default.
To clarify above elements use the following code.
It describe subject marks of two students.
Tharushi has got 100 for Maths and 95 for English , and Sum is 195
Chamindi has got 90 for Maths and 80 for English, and Sum is 170.
<!DOCTYPE html>
<html lang = "eng">
<title>HTML5</title>
<body>
<h1> Marks of Students </h1>
<table>
<thead>
<tr>
<th>Student</th>
<th>Tharushi</th>
<th>Chamindi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>100</td>
<td>90</td>
</tr>
<tr>
<td>English</td>
<td>95</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>195</td>
<td>170</td>
</tr>
</tfoot>
</table>
</body>
</html>
Then the out put will be as follow.
No comments:
Post a Comment