HTML TABLES (13)
HTML Tables are used to arrange data in web pages. HTML allows the use of tables by <table>…</table> tags. Each row in HTML table is recognized by <tr>…</tr> tag. In each row every cell is recognized by <td>…</td> tag.
Following some important tags used for creation of beautiful and colorful tables:
| TABLE TAGS | DISCRIPTION |
| <table>…</table> | It is used to define a table. |
| <tr>…</tr> | It is used to define a table row. |
| <td>…</td> | It is used to define a table cell. |
| <th>…</th> | It is used to define a table header. |
| <thead>…</thead> | It is used to define a group of header content in a table. |
| <tbody>…</tbody> | It is used to define a group of body content in a table. |
| <tfoot>…</tfoot> | It is used to define a group of footer content in a table. |
| <caption>….</caption> | It is used to define a caption of a table. |
Simple Table Example:
Following are some important attributes to the <table>…</table> tag:
Following example will use table tags to create a table of 5 rows and 5 columns. There is also a table caption entered using <caption>…<caption> tag. Moreover, simple text is placed in every cell.
Example 1: <html> <head> <title>Website-School/HTML Table Example 1 Result</title> </head> <body> <table width=”580″ height=”441″ border=”1″> <caption> Simple Table </caption> <tr> <td width=”89″>Monday</td> <td width=”149″>8:00-10:00 English</td> <td width=”151″>10:00-12:00 Chemistry</td> <td width=”150″>12:00-2:00Maths</td> <td width=”7″>2:00-4:00 Physics</td> </tr> <tr> <td>Tuesday</td> <td>8:00-10:00 Physics</td> <td>10:00-12:00 English</td> <td>12:00-2:00 Chemistry</td> <td>2:00-4:00Maths </td> </tr> <tr> <td>Wednesday</td> <td>8:00-10:00 Chemistry</td> <td>10:00-12:00Physics </td> <td>12:00-2:00 English</td> <td>2:00-4:00 Maths</td> </tr> <tr> <td>Thursday</td> <td>8:00-10:00 Chemistry</td> <td>10:00-12:00 Maths</td> <td>12:00-2:00Physics</td> <td>2:00-4:00 English</td> </tr> <tr> <td>Friday</td> <td>8:00-10:00 Physics</td> <td>10:00-12:00 Chemistry</td> <td>12:00-2:00 English</td> <td>2:00-4:00 Maths</td> </tr> </table> </body> </html>
| TABLE TAG ATTRIBUTES | DISCRIPTION |
| Width | It is used to define width of a table. |
| Height | It is used to define height of a table. |
| Summary | It is used to define summary of a table. |
| Cell spacing | It is used to define cell spacing of a table. |
| Cell Padding | It is used to define cell padding of a table. |
| Bgcolor | It is used to define background color of a table. |
| Border | It is used to define border of a table. |
Simple Table Attributes Example: Following example shows a table of 6 rows and 6 columns. The height, width, border, cell spacing, cell padding, background color and summary are given as an attributes to the <table>…</table> tag.
Example 2:
<html>
<head>
<title>Website-School/HTML Table Example 2 Result</title>
</head>
<body>
<table width=”617″ height=”517″ border=”3″ cellpadding=”2″ cellspacing=”2″ bgcolor=”#00CC33″ summary=”Table with 6 rows and 6 columns.”>
<caption>
Table with 6 rows and 6 columns..
</caption>
<tr>
<td width=”83″>Days</td>
<td width=”78″>8:00-10:00</td>
<td width=”84″>10:00-12:00 </td>
<td width=”78″>12:00-2:00</td>
<td width=”66″>2:00-4:00 </td>
<td width=”214″>4:00-6:00 </td>
</tr>
<tr>
<td>Monday</td>
<td> English</td>
<td> Chemistry</td>
<td>Maths</td>
<td>Physics</td>
<td>Urdu</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Physics</td>
<td>English</td>
<td>Chemistry</td>
<td>Maths </td>
<td>urdu</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Chemistry</td>
<td>Physics </td>
<td>English</td>
<td>Maths</td>
<td> Urdu</td>
</tr>
<tr>
<td>Thursday</td>
<td> Chemistry</td>
<td> Maths</td>
<td>Physics</td>
<td> English</td>
<td>Urdu</td>
</tr>
<tr>
<td>Friday</td>
<td>Physics</td>
<td>Chemistry</td>
<td> English</td>
<td>Maths</td>
<td> Urdu</td>
</tr>
</table>
</body>
</html>
See, how easy it is to create a table using HTML.
Great article! I just added it to my bookmarks.
Is there something wrong with the CSS here? Everything looks orange and I can barely read the page?
Would it be possible repost this to one of my sites on this subject? I’d give you full credit, of course. Let me know by email what you think.
Howdy, I viewed your web-site in a very completely new directory site involving blogs and forums. I don’t understand how the web-site emerged upward, have to have already been a new typo, Your website appears to be the truth is. Have a suitable morning.