HTML - Tables

Tables are merely structures in which information (or parts of a Web page) is presented in rows and columns. Each individual segment of a table is called a cell; for example, row one, column one represents one cell; row two, column one is another; and so on. <TABLE> and </TABLE> tags are used to create a table. It is a non-empty tag.
 
 
Example:
<HTML>
 
                        <HEAD>
 
                                    <TITLE>Table Example</TITLE>
 
                        </HEAD>
 
                        <BODY>
 
<TABLE>
 
<CAPTION>Interests</CAPTION>
<TR>
 
<TH>My Interests</TH><TH>My Friends Interests</TH>
</TR>
<TR>
<TD>Being Inactive</TD><TD>Being Active</TD>
</TR>
<TR>
<TD>Watching Television</TD>
<TD>Playing Sports</TD>
</TR>
</TABLE>
</BODY>
</HTML>
 
The above example displays a simple table without using any of the attributes of any tag.
 
 
Example:
 
            <HTML>
 
<HEAD>
 
<TITLE>Table</title>
 
</HEAD>
 
<BODY>
 
<CENTER>
<TABLE width="95%" border="10" bordercolor="black" cellpadding="5">
<TR>
<TD rowspan="3" background="pinkbackground.gif" align="center" width="20%">i am spanning 3 rows!</TD>
<TD colspan="2" bgcolor="yellow" align="center">this is my table</TD>
</TR>
 
<TR>
<TD bgcolor="aqua" align="right" valign="top">&nbsp;<p>i have some padding to keep me away from the border! </TD>
<TD bgcolor="fuchsia">
<TABLE border="3" width="100%">
<TR>
<TD colspan="2" align="center">nested table</TD>
</TR>
 
<TR>
<TD>the self known to me</TD>
<TD>the self unknown to me and unknown by others</ TD>
 
  </TR>
 
  <TR>
<TD>the self known to me and known by others</TD>
<TD>the self unknown to me but known by others</TD>
</TR>
 
</TABLE>
</TD>
</TR>
 
<TR>
<TD bgcolor="lime">watching television</td>
<TD bgcolor="silver">playing sports</td>
</TR>
 
</TABLE>
 
</CENTER>
 
</BODY>
</HTML>
 
 
The <CAPTION> tag defines a label for a table. Place this tag within the <TABLE> tag but not inside the <TD> or the <TR> tags, which indicate table cells and table rows respectively. The <TR> tag specifies a table row. Use this tag inside a <TABLE> tag. The <TR> tag can contain <TH> tags, which indicate table headings, and <TD> tags, which indicate table cells. The <TD> tag specifies text in a cell in a table. Use the <TD> tag inside a <TR> tag inside a <TABLE> tag. The <TH> tag specifies a table cell whose contents are usually displayed in a bolder font than those of regular table cells. The intent of the TH tag is that you use it for column or row headings. <TBODY> <THEAD>
 
 
Various <TABLE> tag attributes are as follow:
 
align: This attribute specifies the alignment of the table. Possible values are left, right and center.
 
bgColor: This sets the color of the background for the table. This color can be overridden by bgColor tag in the <TH>, <TR>, or <TD> tags.
 
border: This attribute indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. A value of 0 means the table has no border. You can also supply the border attribute without specifying a value for it to indicate that the table has a border of the default thickness.
 
bordercolor: This attribute specifies the border color of the table.
 
cellpadding: This attribute determines the amount of space, in pixels, between the border of a cell and the contents of the cell. The default is 1.
 
cellspacing: This attribute determines the amount of space, in pixels, between individual cells in a table. The default is 2.
 
height: This attribute specifies the height of the table. The default is the optimal height determined by the contents of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign.
 
width: This attribute defines the width of the table. The default is the optimal width determined by the contents of each cell. The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign.
 
hspace: This attribute specifies the distance between the left and right edges of the table and any surrounding content. It takes the integer value.
 
vspace: This attribute specifies This attribute specifies the distance between the left and right edges of the table and any surrounding content. It takes the integer value. It takes the integer value.
 
 
Various <CAPTION> tag attributes are as follows:
 
align: This attribute specifies the position of caption within table. Possible values are bottom and top (default).
 
 
Various attributes of <TR> tag are as follows:
 
align: This attribute specifies the horizontal position of content in the cell. Possible values are center, left (default) and right.
 
valign: This attribute specifies the vertical position of content in the cell. Possible values are baseline, bottom, middle (default) and top.
 
bgcolor: This attribute sets the background color for the row.
 
 
Various attributes of <TD> tag are as follows:
 
align: This attribute specifies the horizontal position of content in the cell. Possible values are center, left (default) and right.
 
valign: This attribute specifies the vertical position of content in the cell. Possible values are baseline, bottom, middle (default) and top.
 
bgcolor: This attribute sets the background color for the row.
 
colspan: This attribute indicates the number of columns the cell spans. Give the number as an integer.
 
rowspan: This attribute indicates the number of rows the cell spans. Give the number as an integer.
 
height: This attribute indicates the height of the cell in pixels.
 
width: This attribute indicates the width of the cell in pixels.
 
nowrap: This is a deprecated attribute. It avoids wrapping text within this cell; can make cells very wide.
 
 
Various attributes of <TH> tag are as follows:
 
align: This attribute specifies the horizontal position of content in the cell. Possible values are center, left (default) and right.
 
valign: This attribute specifies the vertical position of content in the cell. Possible values are baseline, bottom, middle (default) and top.
 
bgcolor: This attribute sets the background color for the row.
 
colspan: This attribute indicates the number of columns the cell spans. Give the number as an integer.
 
rowspan: This attribute indicates the number of rows the cell spans. Give the number as an integer.
 
height: This attribute indicates the height of the cell in pixels.
 
width: This attribute indicates the width of the cell in pixels.
 
nowrap: This is a deprecated attribute. It avoids wrapping text within this cell; can make cells very wide.
 
 
Example:
 
<HTML>
<HEAD>
<TITLE>Table Example</title>
</HEAD>
<BODY>
 
<TABLE cellspacing="2" cellpadding="2" border="1">
 
                                                <THEAD align="center">
 
                                                            <TR align="center">
 
                                                                        <TD>
 
                                                                                    <TH>Chicago
 
                                                                                    <TH>Washington, DC
 
                                                                                    <TH>New York
 
                                                                                    <TH>Charlottesville
 
                                                <TFOOT align="char">
 
                                                            <TR>
 
                                                                        <TH align="center">Total
 
                                                                        <TD>118.45
 
                                                                        <TD>105.45
 
                                                                        <TD>183.95
 
                                                                        <TD>58.45
 
                                                <TBODY align="char">
 
                                                <TR>
 
                                                            <TH align="center">Breakfast
 
                                                                        <TD>12.95
 
                                                                        <TD>9.95
 
                                                                        <TD>15.95
 
                                                                        <TD>4.95
 
                                                <TR>
 
                                                            <TH align="center">Lunch
 
                                                                        <TD>13.50
 
                                                                        <TD>9.50
 
                                                                        <TD>16.00
 
                                                                        <TD>6.50
 
                                                <TR>
 
                                                            <TH align="center">Dinner
 
                                                                        <TD>35.00
 
                                                                        <TD>26.00
 
                                                                        <TD>55.00
 
                                                                        <TD>18.00
 
                                                <TR>
 
                                                            <TH align="center">Transportation
 
                                                                        <TD>12.00
 
                                                                        <TD>15.00
 
                                                                        <TD>22.00
 
                                                                        <TD>9.00
 
                                                <TR>
 
                                                            <TH align="center">Entertainment
 
                                                                        <TD>45.00
 
                                                                        <TD>45.00
 
                                                                        <TD>75.00
 
                                                                        <TD>20.00
 
</TABLE>
</BODY>
</HTML>
 
 
 
You can define one or more rows as the <THEAD>, one or more rows as the <TFOOT>, and the remaining rows take on the <TBODY> formatting.
 
 
You can group rows using the <THEAD>, <TFOOT>, and <TBODY> elements. When you create a table, you generally have a header row (with cell headings), number of rows with data, and then a footer row with totals. If you use the <THEAD>, <TFOOT>, and <TBODY> tags, you must use every element, even if you don’t need the entire set. Although you must use them, you can leave them empty. The order in which they should appear is <THEAD>, <TFOOT>, and <TBODY>. This order is required because browser needs to be able to load both the header and the footer information before it loads the body, which could be hundreds of rows. Down the page, you will be able to fit the entire table in one screen with the body scrolling, or the browser automatically putting a header and footer on each page, when it prints a long table.