Chapter 9
How to create tables in an HTML document.
HTML Tables:
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
HTML Table Tags
Tag
|
Description
|
<table>
|
Defines a table
|
<th>
|
Defines a header cell in a table
|
<tr>
|
Defines a row in a table
|
<td>
|
Defines a cell in a table
|
<caption>
|
Defines a table caption
|
<colgroup>
|
Specifies a group of one or more columns in a table for formatting
|
<col>
|
Specifies column properties for each column within a <colgroup>
element
|
<thead>
|
Groups the header content in a table
|
<tbody>
|
Groups the body content in a table
|
<tfoot>
|
Groups the footer content in a table
|
Example :8
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>ATOZ4TUTORIALS</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>ATOZ</td>
<td>4</td>
<td>TUTORIALS</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>ATOZ</td>
<td> 4 </td>
<td>TUTORIALS</td>
</tr>
<tr>
<td>ATOZ</td>
<td> 4 </td>
<td>TUTORIALS</td>
</tr>
</table>
</body>
</html>
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
One column:
| ATOZ4TUTORIALS |
One row and three columns:
| ATOZ | 4 | TUTORIALS |
Two rows and three columns:
| ATOZ | 4 | TUTORIALS |
| ATOZ | 4 | TUTORIALS |
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p><font color=red>ATOZ4TUTORIALS</font></p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td><font color=red>ATOZ4TUTORIALS</font></td>
</tr>
</table>
</body>
</html>
Output is:
| This is a paragraph ATOZ4TUTORIALS This is another paragraph | This cell contains a table:
| ||||
This cell contains a list
| ATOZ4TUTORIALS |
Wow, great examples of the HTML Table Tag. I also created a tutorial on this that I thing will help your users.
ReplyDelete