![]()
Tables: Since there's not much more to say that hasn't been already said about tables in HTML documents, I've decided to format a few tables. Look at the source (View => Source) to see how and what tags make up these tables.
Table 1a - Simple 2 x 2 Table 300 pixels wide:
|
Row 1 Cell One |
Row 1 Cell Two |
|
Row 2 Cell One |
Row 2 Cell Two |
Table 1b - Simple 2 x 2 Table 95% of Screen Width:
|
Row 1 Cell One |
Row 1 Cell Two |
|
Row 2 Cell One |
Row 2 Cell Two |
Hint: Resize your browser to see how these top 2 tables differ.
Table 2a - Simple 2 x 2 Table Column 1 = 100 pixels, Column 2 = 200
|
Row 1 Cell One |
Row 1 Cell Two |
|
Row 2 Cell One |
Row 2 Cell Two |
Table 3a - Colspan Table
|
Row 1 Cell One |
|
|
Row 2 Cell One |
Row 2 Cell Two |
Edit colspan # in (td) tag to reflect the # of columns it must span! Use Cellspacing
in the (table) tag to define the amount of space between the item in a cell,
and the cell borders.
Table 3b - Rowspan Table
|
Column 1 Cell One |
Column 2 Cell One |
|
Column 2 Cell Two |
Edit the rowspan # in the (td) tag to reflect the # of rows it must span! Use
Cellpadding in the (table) tag to define the amount of space between each cell!
Table 3c - For Further Clarity
|
Column 1 Cell One |
Column 2 Cell One |
|
Column 1 Cell Two |
Table 4 - Invisible Borders
|
1. |
List Item One |
|
2. |
List Item Two |
Border = "0" in the (table) tag must be explicitly set in order to get the
borders turned off in both IE and Netscape!
Nested Tables (table within table)
|
Table 1 Row 1 Cell One |
Table 1 Row 1 Cell Two |
||||
|
Table 1 Row 2 Cell One |
|
|
|
![]() |
View the Web Safe Color Table
This table will help ensure that you use colors that will NOT dither in either browser. To use, simple select the color you like, making note of the hexadecimal code, and use in your page. Note: you can automatically tell a web safe color if the numbers and letters are in pairs. For example, the color "ff0000" is "web safe" while "054bbb" wouldn't be.
Tags New to Unit 2 -- For a more detailed explanation, view the Niederst book. Pages will be listed next to the tag.
Fonts: <font> </font> pp 106 -- Specifies size, color, typeface and style of text within tags.
Example: <font color="blue" size="+1">TEXT</font> is seen as TEXT
Use the "size" tag to denote size of text relative to the base font.
Paragraph: <P> </P> pp 104 Start of a new paragraph. Closing tag not manditory, but nice practice!
Allows for spacing between items on the page. Differs from the Break tag <h;BR>
Use the align="left, center, right" argument to control placement of text on the page.
Image Tag: <img> pp 149 - 151 Places an image on the page. Please view the pages in the Niederst book for a full explanation!
Further arguments:
src="filename" -- URL of said image
alt="text" -- alternative text between quotes is displayed when image isn't loaded (good for non graphical based browsers)
align="value" -- controls placement of text around image OR how text is aligned to image
width="#", height="#" -- specifies height and width of image, can be used to shrink or enlarge image, value is in pixels!
Tables: <table> </table> -- pp 168 - 176 Creates a table, further attributes below:
align=left/center/right -- positions table on page -- center tag is useless!
background=URL -- specifies imgage to use as table "wallpaper"
bgcolor="######" -- specifies color of entire table (use the hexadecimal #'s from web safe color list above)
border=#" -- specifies border of entire table in pixels
cellpadding="#" -- specifies, in pixels, space between cell contents and cell borders
cellspacing="#" -- specifies, in pixels, space between cells
height="#", width="#" -- specifies, in pixels, size of the table. Can be used in table data tags <td>
Table Row: <tr> </tr> -- Creates a row within the table -- can take the align, background, bgcolor, and height/width attributes for the table tags above
Table Data: <td> </td> -- Creates a cell within a row -- can take the same attributes as the table row tag above plus:
colspan="#" -- defines number of columns a cell will span
rowspan="#" - defines number of rows a cell will span