Advanced Java and Web Technologies for JNTUK
Blog providing beginner tutorials on different web technologies like HTML, CSS, Javascript, PHP, MYSQL, XML, Java Beans, Servlets, JSP and AJAX

19/01/2014 Categories: HTML. No Comments on Tables

Tables are a powerful HTML tool with many uses. They are developed primarily to communicate tabular data (for academic and research purpose). Tables are now used for many purposes like simply holding tabular data to the layout of entire pages.

A table in HTML is delimited using the table tag (<table>). A table contains rows and cells. To create a row, we use the table row tag (<tr>) and to create a cell we use the table data tag (<td>). These three tags (<table>, <tr> and <td>) are the basic tags required to create a table.

The table in HTML automatically expands to fit the size of its contents. When the table expands to the container (webpage or another HTML element like a <div>) size, the contents of the table cells will wrap. Sometimes, we may need to restrict the size of a table to fit the parent container size or to fill up the empty space in the container. We can use the width attribute of the table tag <table> to manually control the width of a table. The value of the width attribute can be either specified in pixels or in percentages. Below is sample HTML code which demonstrates the use of the width attribute:

 

Cell Spacing and Cell Padding

We can control two types of spacing inside the table with respect to cells. One is cell spacing which is controlled using the cellspacing attribute of the table tag (<table>) and the second is cell padding which is controlled using the cellpadding attribute of the table tag. Cell spacing is the gap between two cells in a table and the gap between the cell’s border and the table border. Cell padding is the gap between the content of the cell and the cell’s border. The value for cellspacing and cellpadding attributes can be specified in either pixels or percentages. Below figure illustrate the difference between cell spacing and cell padding:

16-cell-pad-and-spacing

Below HTML code demonstrate the cellspacing and cellpadding attributes:

 

Borders and Rules

To display the outside border of a table, the border attribute of the table tag (<table>) can be used. The value of the border attribute specifies the width of the border in pixels. The default value is 0 (no border). The border is helpful in debugging tables, especially in the case of nested tables. To specify which outside borders are displayed, the frame attribute (of <table> tag) can be used. It accepts the following values:

17-table-frame-attribute

We can us the table tag’s rules attribute to control what rules (borders between cells) are displayed in a table. Note that the width of rules is governed by the table spacing attribute. For example, setting cellspacing to a value of 5px results in rules five pixels wide. The rules attribute accepts the following values:

18-table-rules-attribute

Rows, Cells and Caption

A row in a table can be created using the table row tag (<tr>). The row ending tag (</tr>) is mandatory. The table row tag (<tr>) supports the following attributes:

19-tr-attributes

The individual cells in a table are the actual elements which hold the data. A cell in a table can be created using the table data tag (<td>). We can use the table header tag (<th>) to define cells that act as headers for the columns. By default the data in a table header is displayed in bold font. Following is the HTML code which demonstrates <td>, <th> and <tr> tags:

The attributes supported by the <td> and <th> tags are shown below:

20-td-th-attributes

Table caption provide an easy method to add descriptive text to a table. A table caption can be created using the <caption> tag. Following HTML code demonstrates the <caption> tag:

The caption tag (<caption>) should come immediately after the opening table tag (<table>).

Row Groups – Header, Body and Footer

Simple tables have only one section, the body, which consists of rows and columns. However, you might want to include additional information in your table by defining a table header and footer to complement the information in the body.

For example, the header could contain the header rows, the body could contain the data, and the footer could contain totals for each column. The advantage to breaking up the table into three sections is that some user agents will then allow users to scroll the body of the table separately from the header and footer.

The HTML 4.01 specification dictates that you must use all three sections, header, body, and footer; if you use any one section. You cannot use only a header section and body section without a footer section, for example. If you don’t intend to use one of the elements, you must still include tags for the section, even if the section is otherwise empty.

The table header is delimited with <thead> tags. Table body is delimited with <tbody> tags and the table footer is delimited with <tfoot> tags. Even though it may seem strange, the <tfoot> tags should be written before the <tbody> tags so that the browser can detect the footer section and format the body appropriately.

Following HTML code demonstrates <thead>, <tbody> and <tfoot> tags:

Output for the above HTML code is shown below:

21-rowgroups-output

Background Colors

To apply background color, the bgcolor can be used with <table>, <tr>, <th> and <td> tags. This attribute has been deprecated in HTML 4.1 in the favor of using CSS. Below is sample HTML code which demonstrated bgcolor attribute:

 

Spanning Rows and Columns

It is possible to span (expand) table cells across rows or columns using the rowspan and colspan attributes respectively. These attributes can be used either on <td> or <th> tags. Consider the below HTML code which demonstrates colspan attribute:

The output in the browser for the above HTML code is as shown below:

22-colspan

Below HTML code demonstrates rowspan attribute. The output is also shown below:

23-rowspan

 Column Groups

HTML 4.01 added a few tags like <colgroup> and <col> to make defining and formatting groups of columns easier. To define columns in a group, use the span attribute with the <colgroup> tag to indicate how many columns are there in the group. For example, the following HTML code places the first three columns in a group:

Additional <colgroup> tags can be used to create additional column groups. We can use the <col> tag to define and format individual columns within a column group. Following HTML code demonstrates the <col> tag:

Column definitions via the <colgroup> or <col> tags do not eliminate or change the necessity of table data tags (which actually form the columns). We must still take care in placing your <td> tags to ensure proper data positioning within columns.

Nested Tables

Coming soon…

Readings:

Using tables in webpages

Reasons why CSS is superior to tables

Tables vs CSS layouts

Suryateja Pericherla

Suryateja Pericherla

Hello, I am Suryateja Pericherla working as an Asst. Professor in CSE department at Vishnu Institute of Technology. I write articles to share my knowledge and make people knowledgeable regarding certain topics.
Suryateja Pericherla

Latest posts by Suryateja Pericherla (see all)

Related Links:

Note: Do you have a question on this article or have a suggestion to make this article better? You can ask or suggest us by filling in the below form. After commenting, your comment will be held for moderation and will be published in 24-48 hrs.

Leave a Reply

Scroll Up