Saturday, July 29, 2017

Html Tables(CONCLUSION)

Hello guys morning and welcome to this section of my tutorials. In my last tutorial i talked about HTML tables tho i didn't round up with it, so in this tutorial am gonna round up with the HTML tables we treated from the previous class and if their is any thing you didn't fully understand from the previous class, feel free to ask your questions. Without wasting time lets go straight to the point.

Table Caption
The caption tag will serve as a tittle or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML. Lets quickly look at the example below.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="2" width="100%" >
<caption>This is a caption on this table</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>
</body>
</html>
Just as i use to recommend in my previous tutorials, try the above code out for clearer understanding and feel free to drop your questions on the comment box.

Table Header, Body, and Footer 
Tables can be divided into three parts: a header, a body, and a foot. The head and the foot are rather similar to headers and footers in word-processing document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:
      <thead> - to create a separate table header.
      <tbody> - to indicate the main body of the table.
      <tfoot> - to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>. Take a good look of the example below.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTM L Tables</title>
</head>
<body>
<tables border="2" width="100%" >
<thead>
<tr>
<td colspan="5">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">This is the footer of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
You can trry the above code out for clearer understanding.

Nested Tables 
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tags <td>.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Bethel Nova</td>
<td>5000</td>
</tr>
<tr>
<td>Ibrahim Temitope</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can try the above code using your text editor. Thats it for HTML Tables, now in my next tutorial am gonna be talking about HTML lists.

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase Tags , Html-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables


Share:

0 comments:

Post a Comment