Basic Table Elements and Attributes in html

Basic Tabl e El ements and Att ributes
Now that you’ve seen how basic tables work, this section describes the elements in a little more
detail, introducing the attributes they can carry. Some of the attributes enable you to create more
sophisticated table layouts. Skim through this section quickly; when you know what you can do
with the markup, you can always come back again and study the markup closely to see how to
achieve what you want.


The <table> Element Creates a Table
The <table> element is the containing element for all tables. It can carry the following attributes:  
All the universal attributes.
 Basic event attributes for scripting.

The dir Attribute
The dir attribute is supposed to indicate the direction of text used in the table. Possible values are
ltr for left to right text and rtl for right to left (for languages such as Hebrew and Arabic):
dir="rtl"
If you use the dir attribute with a value of rtl on the <table> element, the cells appear from the
right first, and each consecutive cell is placed to the left of that one.


The <tr> Element Contains Table Rows
The <tr> element contains each row in a table. Anything appearing within a <tr> element should appear on the same row.

The <td> and <th> Elements Represent Table Cells
Every cell in a table is represented by either a <td> element for cells containing table data or a <th>
element for cells containing table headings.
By default, the contents of a <th> element usually display in a bold font, horizontally aligned in the
center of the cell. The content of a <td> element, meanwhile, usually displays left-aligned and not in
bold (unless otherwise indicated by CSS or another element).
The <td> and <th> elements can both carry the same set of attributes, and the attribute applies only
to that one cell carrying it. Any effects these attributes have override settings for the table as a whole
or any containing element (such as a row).

In addition to the universal attributes and the basic event attributes, the <td> and <th> elements can
also carry the following attributes:
colspan headers.
 rowspan.

<th> elements can also carry the scope attribute.
The colspan Attribute
Use the colspan attribute when a cell should span across more than one column. The value of the
attribute specifies how many columns of the table a cell spans across.
colspan="2"

The headers Attribute
The headers attribute indicates which headers correspond to that cell. The value of the attribute is a
space-separated list of the header cells’ id attribute values:
headers="income q1"
The main purpose of this attribute is to support voice browsers. When a table is read to you, it can
be hard to keep track of which row and column you are on; therefore, the header attribute reminds
users which row and column the current cell’s data belongs to.

The rowspan Attribute
The rowspan attribute specifies the number of rows of the table a cell spans across, the value of
the attribute being the number of rows the cell stretches across. (See the example in the section
“Spanning Rows Using the rowspan Attribute.”)
rowspan="2"

The scope Attribute
You can use the scope attribute to indicate which cells the current header provides a label or header
information for. You can use it instead of the headers attribute in basic tables, but it does not have
much support.
scope="range"

row :-    Cell contains header information for that row.
col :-    Cell contains header information for that column.
rowgroup :-    Cell contains header information for that rowgroup (a group of cells in a row created using the <thead>, <tbody>, or <tfoot> elements).
colgroup:-     Cell contains header information for that colgroup (a group of columns created using the <col> or <colgroup> element, both of which are discussed in the section “Grouping Sections of a Table”).