HTML TABLES (13)

html tables

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.

For more visit next posts in this category.To go back to Contents of this tutorial: Contents of HTML Tutorial

email

12 Responses to HTML TABLES (13)

  1. Selena Gomez says:

    Great article! I just added it to my bookmarks.

  2. Is there something wrong with the CSS here? Everything looks orange and I can barely read the page?

  3. 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. :)

  4. 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.

  5. I simply want to say I am just very new to weblog and absolutely loved your web page. Very likely I’m planning to bookmark your blog post . You amazingly come with perfect writings. Thanks for sharing with us your blog site.

  6. ajs 562 says:

    Looking around

    I like to look around the web, regularly I will just go to Stumble Upon and follow thru

  7. Looking around

    I like to surf around the web, often I will go to Stumble Upon and follow thru

  8. ntc 249 says:

    Looking around

    I like to surf around the web, regularly I will just go to Digg and read and check stuff out

  9. read post says:

    I’m very pleased to discover this page. I want to to thank you for your time for this fantastic read!! I definitely liked every bit of it and i also have you book-marked to see new information on your blog.

  10. Attractive element of content. I simply stumbled upon
    your website and in accession capital to
    assert that I acquire actually enjoyed account your
    weblog posts. Anyway I will be subscribing on your feeds and even I success you get
    right of entry to constantly quickly.

  11. I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did, the internet will be much more useful than ever before.

  12. patches says:

    How do you find different blogs on Blogger with keyword or search?

Leave a Reply