HTML Tables
Tables help us in organizing data. Webpages are created mostly using tables or div. Table simplify the design of the document. Each table is associated with a caption which describes about the content of the table. Tables can help us in showing information in tabular form.
Elements used in the Table Element
Tables help us in organizing data. Webpages are created mostly using tables or div. Table simplify the design of the document. Each table is associated with a caption which describes about the content of the table. Tables can help us in showing information in tabular form.
Elements used in the Table Element
- Caption
- ColGroup
- Col
- TBody
- THead
- TFoot
- TR
- TD
- TH
CAPTION Element
It is used to create caption of the table. A table should have only one caption element and it must be placed after the starting tag of table.
<Table>
<Caption> Caption here </Caption>
</Table>
COLGROUP Element
It is used to specify the properties, such as color, border for a group of columns in a table. The colgroup element must be placed after the caption element and before the tbody, thead, tfoot, tr element. Span attribute of colgroup is used to specify the number of columns on which the properties will be applied.
<Table>
<Caption> Caption here<,/Caption>
<ColGroup span="2" style="color:blue">
</ColGroup>
</Table>
COL element
It is used to define the properties of each column of a table separately.
In the below ex we have defined two col elements where each element represent one column of a table.
<Table>
<COL Style="background-color: blue/>
<COL Style="background-color: blue/>
</Table>
TBODY Element
This element is used to group the rows of a table and is used in conjunction with THEAD and TFOOT. These three element represent the body, head and footer of the table.
THEAD Element
This element determines the header for the table.
TFOOT Element
This element determines the footer of the table.
<!Doctype Html>
<html>
<head><title>Table</title></head>
<body>
<h1>THEAD, TBODY, TFOOT of the TABLE</h1>
<Table>
<THEAD>
<Tr><td > This is table head </td></tr>
</Thead>
<Tbody>
<tr><td > This is table body</td></tr>
</Tbody>
<Tfoot>
<tr><td > this is footer</td></tr>
</Table>
</body>
</html>
TR Element
It is used to define the rows of a table.
TR can be used in the following context
- Child of THEAD Element
- Child of TBody Element
- Child of TFoot Element
- Child of Table Element
TD and TH element
Table contains rows which contains cells. A table can have one or more cells this are defined as standard and header cells. Header cells are used for showing header data while standard for general.
<!Doctype Html>
<html>
<head><title>Table</title></head>
<body>
<h1>TD and TH of the TABLE</h1>
<Table>
<Tr>
<TH> Header 1</th>
<th> Header 2</th>
</tr>
<td> data 1</td>
<td> data 2</td>
</tr>
</Table>
</body>
</html>
Posts
0 comments:
Post a Comment