- Example 1A - SOURCE CODE (first table row contains only one cell)
<table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="5" cellpadding="3">
<tr><td>MY DAILY MENU</td></tr>
<tr><td valign="top"><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>
<tr><td valign="top"><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>
<tr><td valign="top"><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr>
</table>Example 1A - RESULT (first table row contains only one cell)MY DAILY MENU Breakfast Orange juice
Toast
Black coffeeLunch Tuna sandwich
AppleDinner Hamburger steak
Mashed potatoes
Green beans
Jello<~Missing table cell
This situation can be remedied using thecolspanattribute whose value defines how many columns a table cell will span. Hence, a<td>tag using acolspan="2"attribute-value pair will specify that that particular cell will stretch over the equivalent of two columns worth of space:Example 1B - SOURCE CODE (cell spans two columns)
<table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="5" cellpadding="3">
<tr><td align="center" colspan="2">MY DAILY MENU</td></tr>
<tr><td valign="top"><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>
<tr><td valign="top"><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>
<tr><td valign="top"><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr>
</table>Example 1B - RESULT (cell spans two columns)MY DAILY MENU Breakfast Orange juice
Toast
Black coffeeLunch Tuna sandwich
AppleDinner Hamburger steak
Mashed potatoes
Green beans
Jello
Note that, as well as usingcolspan="2"in the 'MY DAILY MENU' table cell to make it span two columns, we also usedalign="center"to center the content. rowspan="number of rows"~ Therowspanattribute works just like thecolspanattribute except that you may find the situation a little more difficult to visualize when working with the source code. But once again the principle is the same. By using therowspanattribute, you can force a table cell to span the number of rows specified by the respective value.
In the following example, the 'MONDAY' table cell spreads over three table rows:Example 2 - SOURCE CODE (cell spans three rows)
<table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="5" cellpadding="3">
<tr><td align="center" colspan="3">MY DAILY MENU</td></tr>
<!-- FIRST CELL IN THIS ROW SPANS THE NEXT 3 ROWS--> <tr><tdrowspan="3">M<br>o<br>n<br>d<br>a<br>y</td><td valign="top"><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>
<tr><td valign="top"><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>
<tr><td valign="top"><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr>
</table>Example 2 - RESULT (cell spans three rows)MY DAILY MENU M
o
n
d
a
yBreakfast Orange juice
Toast
Black coffeeLunch Tuna sandwich
AppleDinner Hamburger steak
Mashed potatoes
Green beans
Jello
Background and Border Color
You are not obliged to settle for the default color used by web browsers to draw the borders of your HTML tables. Using various attributes in the<tableborder="number in pixels"
bordercolor="color"
bordercolorlight="color"
bordercolordark="color"
bgcolor="color">
...</table>Width of table border
Table border color
Top/left side border color
Bottom/right side border color
Background color
<table>tag, you can specify your table's border color and even create a simple 3D effect. You can also define your table's background color. These attributes are detailed below:border="width in pixels"~ To recap from the previous page, you can use theborderattribute to specify the width of your table's border in pixels. The number of pixels desired for the width is used as the value.bordercolor="color definition*"~ Thebordercolorattribute can be used to define the color of your table's border. You may use anylegal color definition as the value. The final effect on your web page will vary from browser to browser. Internet Explorer will use your selected color to display one solid colored frame around your table. Gecko-based browsers, such as Firefox, will create a 3D lighting effect using a light version of your color on the top and left sides and a dark version of your color on the bottom and right sides.bordercolorlight="color definition*"~ Thebordercolorlightattribute can be used to define the border color on the top and left sides of your table. Although any legal color definition can be used as the value, the intent is to allow web authors to specify light colors in order to create a 3D lighting effect on your table's border. (This attribute is not supported in Netscape or Mozilla since thebordercolorattribute already accomodates the resulting effect.)bordercolordark="color definition*"~ Thebordercolordarkattribute can be used to define the border color on the bottom and right sides of your table. Although any legal color definition can be used as the value, the intent is to allow web authors to specify dark colors in order to create a 3D lighting effect on your table's border. (This attribute is not supported in Netscape or Mozilla since thebordercolorattribute already accomodates the resulting effect.)bgcolor="color definition*"~ Using thebgcolorattribute, you can specify the background color of your table which includes the background in between table cells and background inside table cells. You may use any legal color definition as the value.
A background color may also be applied to an individual table data cell by using thebgcolorattribute in the<td>tag. The selected background color will thus only apply to that particular cell.*(Please see Font Color for a description of all legal color definitions.)
Example 1 - SOURCE CODE<table border="5" bordercolor="maroon" bgcolor="silver">
<tr><td>Cell content...</td><td>Cell content...</td></tr>
<tr><td>Cell content...</td><td>Cell content...</td></tr>
<tr><td>Cell content...</td><td>Cell content...</td></tr>
</table>Example 1 - RESULTCell content... Cell content... Cell content... Cell content... Cell content... Cell content... Example 2 - SOURCE CODE<table border="5" bordercolor="#8080cc" bordercolorlight="#8080c0" bordercolordark="#400080" bgcolor="#ffffcc">
<tr><td>Cell content...</td><td>Cell content...</td></tr>
<tr><td>Cell content...</td><td>Cell content...</td></tr>
<tr><td>Cell content...</td><td>Cell content...</td></tr>
</table>Example 2 - RESULTCell content... Cell content... Cell content... Cell content... Cell content... Cell content...
The
All these attributes are described in more detail below:
Web browsers will automatically set the dimensions of the rows and columns in your web page table according to how much content your table cells contain. Since cells are displayed in a grid-like pattern then the cell containing the most content will typically set the width and height of all cells adjacent to it and hence establish the width and height of related rows and columns in your table.
You can, however, apply the
These attributes are described in more detail below:
cellspacing and cellpadding attributes are used in the <table>tag and apply to all cells in the respective table. The align and valignattributes are used in individual <td> tags and apply respectively to that particular table data cell. All these attributes are described in more detail below:
cellpadding="length in pixels"~ Thecellpaddingattribute, used in the<table>tag, specifies how much blank space to displayin between the content of each table cell and its respective border. The value is defined as a length in pixels. Hence, acellpadding="10"attribute-value pair will display 10 pixels of blank space on all four sides of the content of each cell in that table. (See Example 1)cellspacing="length in pixels"~ Thecellspacingattribute, also used in the<table>tag, defines how much blank space to display in between adjacent table cells and in between table cells and the table border. The value is defined as a length in pixels. Hence, acellspacing="10"attribute-value pair will horizontally and vertically separate all adjacent cells in the respective table by a length of 10 pixels. It will also offset all cells from the table's frame on all four sides by a length of 10 pixels.
Example 1 clearly illustrates the difference between cellpadding and cellspacing:Example 1 - (cellpadding="10" cellspacing="10")Example 1 - LegendCell contentCellpadding.....Cell borderCellspacingTable borderalign="left, center or right"~ When thealignattribute is used in a<td>tag as opposed to a<table>tag, it produces a slightly different effect. When used in a<td>tag, thealignattribute will set the horizontal alignment of that respective cell's content. The value can beleft,right,centerorjustify. (Please see Aligning Text for a full description of the resulting effects.)valign="top, middle, or bottom"~ The valign attribute can be used in a<td>tag to set the vertical alignment of that respective cell's content. The values that can be used aretop,middle, orbottomand will produce the following effects respectively:top~ The content is aligned flush with the top of the table cell (taking cellpadding into consideration).middle~ The content is aligned in the vertical center of the table cell (default value).bottom~ The content is aligned flush with the bottom of the table cell (taking cellpadding into consideration).
Example 2A - SOURCE CODE (Default vertical alignment)<table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="2" cellpadding="3"><tr><td><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>
<tr><td><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>
<tr><td><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr></table>Example 2A - RESULT (Default vertical alignment)Breakfast Orange juice
Toast
Black coffeeLunch Tuna sandwich
AppleDinner Hamburger steak
Mashed potatoes
Green beans
JelloExample 2B - SOURCE CODE (valign="top" set for left-hand cells)<table border="3" bordercolor="#c86260" bgcolor="#ffffcc" width="50%" cellspacing="2" cellpadding="3"><tr><td valign="top"><b>Breakfast</b></td><td>Orange juice<br>Toast<br>Black coffee</td></tr>
<tr><td valign="top"><b>Lunch</b></td><td>Tuna sandwich<br>Apple</td></tr>
<tr><td valign="top"><b>Dinner</b></td><td>Hamburger steak<br>Mashed potatoes<br>Green beans<br>Jello</td></tr></table>Example 2B - RESULT (valign="top" set for left-hand cells)Breakfast Orange juice
Toast
Black coffeeLunch Tuna sandwich
AppleDinner Hamburger steak
Mashed potatoes
Green beans
Jello
<td width="pixels or percentage" |
You can, however, apply the
width and height attributes to your <td> tags to explicitly set the dimensions of your table cells and thus exercise control over the width and height of rows and columns.These attributes are described in more detail below:
width="pixels or percentage"~ Using thewidthattribute in your<td>tags, you can explicitly set the width of your table data cells. This will have the effect of setting not only the width of that particular cell but will also set the width of the entire column in which that cell resides. You may define either a fixed width in pixels or a relative width (recommended) which is equal to a percentage of the table width.
NOTE: In the case where thewidthattribute is set in more than one cell in the same column, the largest width is the one that is applied. Likewise, if the content in any table cell in that column (such as a graphic) outsizes a specified width, the width of the content will establish the width of the cell and the column it resides in.
Example 1 below renders a table that is 500 pixels wide and has two columns. The width of the first table data cell is set to 25% which then sets the width of all the cells in Column 1 at 25% or 125 pixels (25% of 500 = 125). The width of all the cells in Column 2 default to the remainder of table's width (75%):Example 1 - SOURCE CODE<table width="500" border="5">
<tr><td width="25%">Column 1</td><td>Column 2</td></tr>
<tr><td>Column 1</td><td>Column 2</td></tr>
<tr><td>Column 1</td><td>Column 2</td></tr>
</table>Example 1 - RESULTColumn 1 Column 2 Column 1 Column 2 Column 1 Column 2 height="pixels or percentage"~ Using theheightattribute in your<td>tags, you can explicitly set the height of your table data cells. This will have the effect of setting not only the height of that particular cell but will also set the height of the entire row in which that cell resides. You may define either a fixed height in pixels (recommended) or a relative height which is equal to a percentage of the table's height.
NOTE: In the case where theheightattribute is set in more than one cell in the same row, the largest height is the one that is applied. Likewise, if the content in any table cell in that row (such as a graphic) outsizes a specified height, the height of the content will establish the height of the cell and the row it resides in.
Example 2 renders a table that is 500 pixels wide and has two rows. The height of the first table cell in Row 1 is set to 100 pixels which then sets the height of all cells in Row 1 to 100 pixels. The height of Row 2 is not affected by the height specification in Row 1.Example 2 - SOURCE CODE<table width="500" border="5"><tr><td height="100">Row 1</td><td>Row 1</td><td>Row 1</td></tr>
<tr><td>Row 2</td><td>Row 2</td><td>Row 2</td></tr></table>Example 2 - RESULTRow 1 Row 1 Row 1 Row 2 Row 2 Row 2
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
Mobile Specifications
