|
|
|
|
| Basic Table Tags Tables can be very simple. Look at the basic table that appears in the graphic on the right. It might be used to display the results of a sporting event basketball game with team's names where it says "header" and the game results in cells three and four. Tables help make this kind of information easy to read. Before we start writing tags for tables, it will help to go through a quick overview of some of the components that will make up these tags. ------------------------------------------------------------------------------------------------------------------------ <.TABLE> and <./TABLE>*** This defines the start and the end of the table in the HTML code. <.TR><./TR> This defines the start and the end of a table row within the TABLE tag. <.TD> <./TD> This stands for table data. Each single table cell within a table row needs to be defined with these opening and closing tags. <.CAPTION><./CAPTION> This specifies the table caption. This tag can be used for a caption above (insert immediately after opening TABLE tag) or below (insert before the closing TABLE tag) the table. <.TH><./TH> Each single header cell within a table row needs to be defined with these opening and closing tags. The content of header cells is automatically displayed in bold text attribute and aligned centered. ------------------------------------------------------------------------------------------------------------------------ The tag that you see below will create a table like the one you see in the graphic on the right: <.TABLE>*** <.CAPTION>Table Caption<./CAPTION> <.TR> <.TH>header<./TH> <.TH>header<./TH> <./TR> <.TR> <.TD>contents of cell 3<./TD> <.TD>contents of cell 4<./TD> <./TR> <./TABLE> ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. --------------------- Table Height and Width (Page 3 of 9) Attributes can be used with basic table tags to control the height and width of the table. The WIDTH and HEIGHT attribute can be used for the TABLE, the TD and the TH tag. Both sizes can be given in pixels or as a percent of the visible browser window: -- If you choose to set table size in pixels, the table or cell will always render in the given pixel width. -- If you choose a percentage value for the table or cell, they will render as a percentage with of the actual browser window. Settings of the attributes for the table cells will be proportioned according to the percentage, or absolute widths set in the <.TABLE> element of the tag. Here's an example: <.TABLE WIDTH="n" HEIGHT="n"><./TABLE>*** This defines a certain width and height for the complete table. "n" can have a value in pixels or in % of the visible browser window. The height value is rarely used. <.TD WIDTH="n" HEIGHT="n"><./TD> This defines a certain width and height for the table cell. "n" can have a value in pixels or in % of the visible browser window. The Netscape browser won't render the height attributes if used for table cells. <.TH WIDTH="n" HEIGHT="n"><./TH> This defines a certain width and height for the table header cell. "n" can have a value in pixels or in % of the visible browser window. The Netscape browser won't render the height attributes if used for table cells. ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. ------------------------ Spacing and Borders (Page 4 of 9) With attributes, you can control the spacing between the table cells and the cell content. This can help you to make your table more readable by preventing your text or data from pressing right up against your table border. It can also be helpful in controling the "white space" between graphics. These attributes can only be set for a complete table. In connection with the BORDER attribute, you can accomplish some interesting effects. <.TABLE CELLPADDING="n"><./TABLE>*** This defines a space of "n" pixels between the content of the table cells and the cell border. <.TABLE CELLSPACING="n"><./TABLE> This defines a space of "n" pixels between the cells in the table. <.TABLE BORDER="n"><./TABLE> This defines the thickness of the border of a table in a pixel value. ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. ----------------------- Spanning Rows and Columns (Page 5 of 9) Sometimes, you need to have a row or a column span several cells of a table in order to organize your content. For example, let's say you have a table that contains the names and the total hitting percentages of four baseball teams. Suddenly you realize you want to show which two teams are in the American League and which two are in the National League. You can add this additional information easily above the names of the teams by making the league names "span" or spill across the two cells. This is done with the attributes COLSPAN and ROWSPAN which can be used in any table cell. This can especially useful for header cells. ------------------------------------------------------------------------------------------------------------------------ <.TD COLSPAN="n"><./TD>*** <.TH COLSPAN="n"><./TH> This tag specifies the number of columns the cell should span. <.TD ROWSPAN="n"><./TD> <.TH ROWSPAN="n"><./TH> This tag specifies the number of rows the cell should span. ------------------------------------------------------------------------------------------------------------------------ The tag below was used to create the table in the graphic on the right: <.TABLE> <.TR> <.TD ROWSPAN="4">this <.BR>cell <.BR>spans <.BR> four <.BR>rows<./TD> <.TD COLSPAN="3"> this cell spans three columns<./TD> <./TR> <.TR> <.TD><./TD> <.TD><./TD> <.TD><./TD> <./TR> <.TR> <.TD><./TD> <TD ROWSPAN="2" COLSPAN="2"> this cell spans two <.BR>columns and two rows <./TD> <./TR> <.TR> <.TD><./TD> <./TR> <./TABLE> ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. ----------------------- Aligning Cell Content (Page 6 of 9) Cell content can be aligned left, right or centered just like regular text attributes. And, because the content is in cells, it can also be aligned vertically within the cell. Alignment can be set for a row of cells or for a single cell. Horizontal Alignment: Left Aligned Cell Content <.TABLE> <.TR> <.TD ALIGN="left">left aligned cell content<./TD> <./TR> <./TABLE>
<.TABLE> <.TR ALIGN="left"> <.TD>left aligned cell content<./TD> <./TR> <./TABLE> Right Aligned Cell Content <.TABLE> <.TR> <.TD ALIGN="right">right aligned cell content<./TD> <./TR> <./TABLE>
<.TABLE> <.TR ALIGN="right"> <.TD>right aligned cell content<./TD> <./TR> <./TABLE> Centered Cell Content <.TABLE> <.TR> <.TD ALIGN="center">centered cell content<./TD> <./TR> <./TABLE> <.TABLE> <.TR ALIGN="center"> <.TD>centered cell content<./TD> <./TR> <./TABLE>
Vertical Alignment: Top Aligned Cell Content <.TABLE> <.TR> <.TD VALIGN="top">top aligned cell content<./TD> <./TR> <./TABLE> <.TABLE> <.TR ALIGN="top"> <.TD>top aligned cell content<./TD> <./TR> <./TABLE> Middle Aligned Cell Content <.TABLE> <.TR> <.TD VALIGN="middle">middle aligned cell content<./TD> <./TR> <./TABLE> <.TABLE> <.TR ALIGN="middle"> <.TD>middle aligned cell content<./TD> <./TR> <./TABLE>
Bottom Aligned Cell Content <.TABLE> <.TR> <.TD VALIGN="bottom">bottom aligned cell content<./TD> <./TR> <./TABLE>
<.TABLE> <.TR ALIGN="bottom"> <.TD>bottom aligned cell content<./TD> <./TR> <./TABLE> ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. ------------------------ Aligning the Entire Table (Page 7 of 9) By default, tables are aligned to the left of the page. But you can easily move them to the right or center them. Here are some sample tags that will accomplish this: A left aligned table: <.TABLE ALIGN="left">*** <.TR> <.TD>cell one<./TD> <.TD>cell two<./TD> <./TR> <.TR> <TD>cell three<./TD> <.TD>cell four<./TD> <./TR> <./TABLE> A right aligned table: <.TABLE ALIGN="right"> <.TR> <.TD>cell one<./TD> <.TD>cell two<./TD> <./TR> <.TR> <.TD>cell three<./TD> <.TD>cell four<./TD> <./TR> <./TABLE> To center a table, you have to use the CENTER tag around the TABLE tag: <.CENTER><.TABLE> <.TR> <.TD>cell one<./TD> <.TD>cell two<./TD> <./TR> <.TR> <.TD>cell three<./TD> <.TD>cell four<./TD> <./TR> <./TABLE><./CENTER> ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. ---------------------- Using Background Colors (Page 8 of 9) If you want to use color in your tables, you can change the background and the border colors. You can change the background color for the either the complete table, a table row, or a single table cell. <.TABLE BGCOLOR="#rrggbb"><./TABLE>*** <.TABLE BGCOLOR="colorname"><./TABLE> This tag defines background color for all table cells. You can either use the hex value of a color or the colorname. <.TR BGCOLOR="#rrggbb"><./TR> <.TR BGCOLOR="colorname"><./TR> This tag defines a background color for all cells of a table row. You can either use the hex value of a color or the colorname. <.TD BGCOLOR="#rrggbb"><./TD> <.TD BGCOLOR="colorname"><./TD> This defines a background color for single cells in a table. You can either use the hex value of a color or the colorname. If a row color is specified, it overrides the background color setting for the complete table. A cell color background overrides a row and table background setting. ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. -------------------- Using Border Colors (Page 9 of 9) HTML allows you to add color to table borders if the attribute BORDER is present in the TABLE tag. As with background color, the border color can be specified for the complete table, a row of cells or single cells, using either colornames or hexadecimal. <.TABLE BORDER BORDERCOLOR="#rrggbb"><./TABLE>*** <.TABLE BORDER BORDERCOLOR="colorname"><./TABLE> This tag specifies a color for the table border. You can either use the hex value of a color or the colorname.
<.TR BORDERCOLOR="#rrggbb"><./TR> <.TR BORDERCOLOR="colorname"><./TR> This tag specifies a specific color for the border or a row of cells. You can eitheruse the hex value of a color or the colorname. Does only work if the BORDER attributes is present in the TABLE tag.
<.TD BORDERCOLOR="#rrggbb"><./TD> <.TD BORDERCOLOR="colorname"><./TD> This tag specifies a specific color for a single cell. You can either use the hex value of a color or the colorname. Does only work if the BORDER attributes is present in the TABLE tag. Code Examples <.TABLE BORDER BORDERCOLOR="#ff0000"> <.TR> <.TD>table color<./TD> <.TD>table color<./TD> <.TD>table color<./TD> <./TR> <.TR BORDERCOLOR="#0000ff"> <.TD>row color<./TD> <.TD>row color<./TD> <.TD BORDERCOLOR="#008000">cell color<./TD> <./TR> <.TR> <.TD>table color<./TD> <.TD BORDERCOLOR="#008000">cell color<./TD> <.TD>table color<./TD> <./TR> <./TABLE> Attributes for Microsoft Internet Explorer If you're writing your page with the Microsoft Internet Explorer browser in mind, you can specify acolor for the light and the dark part of the table or cell border border. You can either use the hex value of a color or the colorname. (Remember, these tags only work in MSIE and not in Netscape.) BORDERCOLORLIGHT="#rrggbb" BORDERCOLORDARK="colorname" These border colors will only render correctly in MSIE browser. Netscape will only show the default border color Code Example <.TABLE BORDER="10" BORDERCOLORLIGHT="#663300" BORDERCOLORDARK="#660000"> <.TR> <.TD>these bordercolors will only render correctly in MSIE browser - Netscape will only show the default border color <./TD> <./TR> <./TABLE> ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>. --------------------- |