Login
Password

Forgot your password?

HTML Tables with Different Attributes

By Edited Aug 7, 2016 0 0

HTML Tables and Attributes

In Web pages, tables are a basic design element. They are used to present data in rows and columns. They make comparative analysis more understandable. They are also used to divide the web page into sections for layout purposes.

HTML (Hyper Text Markup Language) tables are composed row by row:  a row is indicated with the <TR> (table row) tag, and the data is separated with either the <TH> (table header) or <TD> (table data) tags. <TR> tag can be compared to a line break, signaling that the following data starts a new table row.

Building HTML tables is the most complex task of all for an HTML author. The <TABLE> tag is used for this purpose.

The general <TABLE> tag is made up of several smaller tags that format and display a table.

CAPTION: Specifies the table caption.
TR: Specifies a table row.
TH: Specifies a table cell containing a heading.
TD: Specifies a table cell containing data.
THEAD: Groups the header content in a table.
TBODY: Groups the body content in a table.
TFOOT: Groups the footer content in a table.
COLGROUP: Defines a group of columns in a table, for formatting.
COL: Defines attribute values for one or more columns in a table.

Each and every tag mentioned above has some attributes associated with it for alignment.

ALIGN attributes is associated with <CAPTION>, <TR>, <TD>, <TH> tags. The <TR> tag has the attribute VALIGN associated with it.

Let us create a basic table.

Codes:

<html>
<head>
<title>Basic Table</title>
</head>
<body>
<h3>Table without border</h3>
<table  border="0">
 <tr><td> Tag</td> <td> Description</td> </tr>
 <tr> <td>CAPTION</td> <td>Specifies a table caption </td></tr><tr><td>TR</td><td>Specifies a table row </td></tr>
<tr><td>TBODY</td><td>Groups the body content in a table </td> </tr>
<tr><td>COLGROUP</td><td> Defines a group of columns in a table,  for formatting</td></tr>
</table>
<p>
<h3>Table with border</h3>
<table  border="1">
 <tr> <td> Tag</td> <td>Description</td> </tr>
<tr><td>CAPTION</td><td>Specifies a table caption </td></tr>
<tr><td>TR</td><td>Specifies a table row </td> </tr>
 <tr><td>TBODY</td><td>Groups the body content in a table</td></tr>
 <tr><td>COLGROUP</td><td> Defines a group of columns in a table,  for formatting</td></tr>
</table>
</body>
</html>

In the above codes it is clearly seen that the table with border is much appealing than the table without the border. However, some browsers do not support the <TABLE> tag. In these cases the <PRE> tag can be used or the table can be called as an inline .jpg image.

Let us now add captions to the table created in the previous example.

Codes:

<html>
<head>
<title>Basic Table</title>
</head>
<body>
<h3>Table without border - Caption on Top</h3>
<table  border="0">
<caption align="top">Table tags and the description</caption>
 <tr><td> Tag</td> <td> Description</td> </tr>
 <tr> <td>CAPTION</td> <td>Specifies a table caption </td></tr><tr><td>TR</td><td>Specifies a table row </td></tr>
<tr><td>TBODY</td><td>Groups the body content in a table </td> </tr>
<tr><td>COLGROUP</td><td> Defines a group of columns in a table,  for formatting</td></tr>
</table>
<p>
<h3>Table with border
- Caption on Bottom</h3>
<table  border="1">
<caption align="bottom">Table tags and the description</caption>
 <tr> <td> Tag</td> <td>Description</td> </tr>
<tr><td>CAPTION</td><td>Specifies a table caption </td></tr>
<tr><td>TR</td><td>Specifies a table row </td> </tr>
 <tr><td>TBODY</td><td>Groups the body content in a table</td></tr>
 <tr><td>COLGROUP</td><td> Defines a group of columns in a table,  for formatting</td></tr>
</table>
</body>
</html>

For adjusting space between cells the CELLSPACING attribute is used.

For adjusting space within cells the CELLPADING attribute is used.

The COLSPAN and the ROWSPAN attributes are used for column spanning and row spanning respectively.

 

Advertisement

Comments

Add a new comment - No HTML
You must be logged in and verified to post a comment. Please log in or sign up to comment.

Explore InfoBarrel

Auto Business & Money Entertainment Environment Health History Home & Garden InfoBarrel University Lifestyle Sports Technology Travel & Places
© Copyright 2008 - 2016 by Hinzie Media Inc. Terms of Service Privacy Policy XML Sitemap

Follow IB Technology