TABLES


Tables

 

Introduction

As we all know that, websites are created with HTML language and web page is divided into parts.

There are two tags used in it. First,<div> which is used for division the web page and second is table <table>. You can use both for creating web page.

tables are used on websites for two major purposes:

  • The obvious purpose of arranging information in a table
  • The less obvious – but more widely used – purpose of creating a page layout with the use of hidden tables.

 

Tables are a very useful and powerful feature of the HTML language, as they give a solution for inserting any type of tabulated data in the document. A table considered  as a set of rows and columns i.e MS-EXCEL. Tables are currently the best way to lay out a web page.

<table>tag

Tables are defined with <table>..</table> tag. A table is divided into three parts as follows:

1<tr> …..</tr> (table row)

2 <th>…..</th> (table heading)

3 <td>…..</td> (table data)

 

1 table rows

<tr> tag is used to create rows in the table. It contains table headers and table data. It is paired tag <tr>(open with)…….</tr>(end with)

Syntax:

 

<table>

<tr>………</tr>

<tr>………</tr>

</table>

TABLE HEADING and TABLE DATA

<th> tag is basically used to create the heading of the column in a table. By default, headings are displayed in BOLD text. It is paired tag means <th> ….. </th> opening and closing tag.

<td> tag is same as <th> except data  will not display in BOLD. Both are always appear in <tr>… </tr> tag.

Syntax:

 

<table>

<tr>

<th>……</th>

</tr>

<tr>

<td>……</td>

</tr>

</table>

Example:

Output:

In the above example you can see data in table with tabular format. There are four rows and four columns in tha table. First row shows headers and rest of all shows data in the table.

TABLE ATTRIBUTES

1 BORDER:

As clear to its name, border strribute used in <table>tag to show thw border of the table. The default value of border is “1” and you can set border as per you needs.

Syntax:

<table border=”1”>………</table>

Example:

Output:

 

2 width

You can set width of table in pixels or percentage.  This attribute can be used in <table> tag, <th>tag, and <tr> tag.

Syntax:

<th width=”50%”>………</th>

Example:

Output:

 

3 ALIGNMENT

 

ATTRIBUTES VALUE DESCRIPTION
align Left displays table at left side in the browser window
Right displays table at center side in the browser window
Center displays table at right side in the browser window

 

SYNTAX:

<table align=”left”>……….</table>

 

 

Example 1:

align=”left”

 

Output:

Example 2:

Align=”center”

Output:

Example 3:

Align=”right”

Output:

4 cellspacing and cellpadding

Cellspacing: Defines the width of the space to be left between cells. It also refers to the space between the border of a table and the adjacent cells.by default value is “2”.

Cellpadding: Defines the width of the space to be left between a cell’s content and its border.

 

Syntax:

 

cellspacing

<table cellspacing=”20″ >

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

</tr>

</table>

Cellpadding

<table cellpadding=”20″>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

</tr>

</table>

Example:

 

 

 

background ,bgcolor and bordercolor

 

Background: set background image with this attribute

Bgcolor: set background color in the table

Bordercolor: set border color in the table

Syntax:

<table background=”url_of_image”>………</table>

<table bgcolor-“red”>………..<table>

Example:

Bgcolor=”red”

Background=”url_of_image”

Border=”red”

EXAMPLE:

 

 

Colspan and rowspan

 

Colspan: You can use the colspan attribute to make a cell span multiple columns.

Rowspan:  rowspan enables you to make a cell span multiple rows.

Syntax:

Colspan:

<TH COLSPAN=”2″>…………</TH>

Example:

Rowspan:  

 

<TH ROWSPAN=”2″>…………</TH>

Example:

 

 

FRAMES

 

Define exactly how to display the border or ‘frame’ surrounding your table. To do this, place the frame=”frame value” attribute-value pair in your <table> tag where frame value equals one of the following and will display the table sides defined in the respective definition:

ATTRIBUTES VALUE DESCRIPTION
Frame Void No frame is drawn
Above shows border on top of table
Below shows border on bottom of table
Hsides shows border on both horizontal sides.
Vsides shows border on both vertical sides
Lhs Only the left-hand side is drawn.
Rhs Only the right-hand side is drawn 
Box All four sides are drawn.
Border All four sides are drawn

 

 

Void

 

Above

Below

Hsides

Vsides

Lhs

Rhs

Box

Border

Rules

rules attribute will define which lines or rules to draw between rows and columns in your table

ATTRIBUTES VALUE DESCRIPTION
rules none no inside borders
ALL

 

 all the internal borders should be visible

COLS

 

 borders between the columns but not between rows.

ROWS

 

borders between rows but not between columns.

GROUPS

 

put borders between groups of table cells.

It used with <THEAD> nad <COLGROUP>

 

None:

All

:

Cols

Rows

 

.

 

 

GROUPS:

IT IS USED IN TWO WAYS:

GROuPING BY ROW

GROPING BY COLUMN

<THEAD> , <TFOOT> and <TBODY>

<THEAD> and <TFOOT> elements are used for create header and footer of the table.

<THEAD> indicates that a group of rows are the header rows at the top of the table.

<TBODY> indicates that a group of rows are body rows.

<TFOOT>indicates that a group of rows are the footer rows at the bottom of the table

Example:

 

HEIGHT

WITH THIS ATTRIBUTE YOU CAN SET THE HEIGHT OF THE CELL

 

Example2:

 

 

Valign

It is used for vertical alignment of all cells in a row. it allows you to override the default alignment for content inside the header cells using a handful of attributes.

ATTRIBUTES VALUE DESCRIPTION
valign top aligns content to top of cells
middle aligns content to middle of cells
baseline aligns content to bottom of cells
bottom aligns content to baselineof cells

Syntax:

<th valign=”top”>………..</th>

<caption>tag

The HTML caption element gives a title for the table in which it is declared. It is usually displayed at the top of the table (by default) and with a bigger font size.

ATTRIBUTES VALUE DESCRIPTION
align top aligns content to top
left aligns content to left
right aligns content to right
bottom aligns content to bottom

 

 

Syntax;:

<caption align=”left”>………</caption>

Example:

 

 

 

Nowrap

With this attribute, the text in a table cell can be wrapped. This attribute has no values. For example, all of the following declarations have the same effect: nowrap, nowrap=”true”, nowrap=”false”, nowrap=”on”, nowrap=”nowrap”.

Syntax:

<td nowrap=”nowrap”>………….</td>

Example:

IMAGES IN TABLE

With the help of <img>tag , you can use image in <td>.

Example:

 

Image as link in table

With the help of <a> tag , you can use links in table.

Syntax:

<td><a href=”url”><img src=”url”/>………..</a></td>

Example:

 

 

 

In the above example, you can see image as link . when you click on image then it will move to the new page(as you mentioned in <a> tag). You can also use simple link in table.

Example:

 

<colgroup>tag and <col>tag

The <colgroup> tag specifies a group of one or more columns in a table for formatting. This element is useful for applying properties to entire columns, instead of repeating the properties for each cell, for each row.

Attributes are:

1 bgcolor : set the background color

2 align : set the  horizontally alignment(left , right , center)

3 valign : set the  vertically alignment(top , bottom , middle , baseline)

4 span: specifies number of columns in a column group.

5 width : set width of column group.

Example:

 

<col>tag

The col element (<col>) specifies properties for each column within a <colgroup> element in a <table>.

Example:

 

 

Nested tables

Nesting a table within another table allows you to create more complex table layouts.

To nest a table, you first create the main table, leaving the cell you want to contain the nested table empty. You can then nest a table by creating a new table in the empty cell.

When creating the tables, make sure you include all the end tags </TH>, </TD>, </TR> and </TABLE> for both the main table and the nested table. Forgetting to include an end tag may adversely affect the layout of the tables.

You can format nested tables as you would format any other table.

 

Example1:

<table border=”1″>

<tr>

<td>First cell in first table. The cell to the right has the second table in it.</td>

<td>

 

<table border=”1″>

<tr><td>nested table</td></tr>

<tr><td>nested table</td></tr>

</table>

 

</td>

</tr>

</table>

 

 

 

Example:2

<TABLE BORDER=3 CELLPADDING=5 ALIGN=CENTER>

<TR>

<TH ALIGN=CENTER>Product Name</TH>

<TH ALIGN=CENTER>Price Per Unit</TH>

<TH ALIGN=CENTER>Units Available</TH>

</TR>

<TR> <TD ALIGN=CENTER>

<TABLE BORDER=1>

<TR>

<TD>Blue shirt</TD>

</TR>

<TR>

<TD>Red shirt</TD>

</TR>

<TR>

<TD>Black shirt</TD>

</TR>

</TABLE>

</TD>

<TD ALIGN=CENTER>$39.99</TD>

<TD ALIGN=CENTER>120</TD>

</TR>

<TR>

<TD ALIGN=CENTER>Pants</TD>

<TD ALIGN=CENTER>$29.99</TD>

<TD ALIGN=CENTER>200</TD>

</TR>

</TABLE>

 

In browser:

 

 

Advantages of tables in html:

  • They’re easy to use and implement (compared to css-layouts).
  • WYSIWYG (What You See Is What You Get) editors like Frontpage and Dreamweaver make it very easy for developers to include them.
  • Tables “break” on various browsers (newer and older versions) thus producing layout dysfunctions.
  • Increase almost unnecessarily the HTML/text ratio. This means that other options could be used to create layouts that produce smaller page files by employing less HTML tags

 

Disadvantages of tables in html:

  1. For disabled users, those who use screen readers will find it harder to jump from section to section
  2. search engines can not read them that well
  3. Tables use more code