TABLES
A table is a grid of rows and columns. Each table element is called a cell and may contain any HTML content, including another table. Tables are defined with the table element <TABLE> which contains row elements <TR> and data elements <TD>.
Uses of HTML tables: tables are useful for a variety of display and organizational purposes| mondrian |
A table with one row and two columns: the <TR> tag specifies rows and the <TD> tag specifies cells within a row
<table width="300" border="2">
<tr>
<td width="150">
first cell
</td>
<td width="150">
second cell
</td>
</tr>
</table>
| first cell | second cell |
Spanning columns and rows: cells can span across columns or rows for more flexibility
<table width="400" border="2">
<tr>
<td width="200">
first cell in first row
</td>
<td width="200">
second cell in first row
</td>
</tr>
<tr>
<td colspan="2">
spanned cell in second row
</td>
</tr>
</table>
| first cell in first row | second cell in first row |
| spanned cell in second row | |
<table width="400" border="2">
<tr>
<td width="200">
first cell in first row
</td>
<td width="200" rowspan="2">
spanned cell in second column
</td>
</tr>
<tr>
<td>
first cell in second row
</td>
</tr>
</table>
| first cell in first row | spanned cell in second column |
| first cell in second row |
Adding background color and images: color and images can be added to an entire table, a row or a cell
<table width="300" height="100" border="0" bgcolor="#990099">
| a | table | with |
| a | background | color |
<table width="100" height="150" border="1" background="images/kepler/kepler2.gif">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFCCCC"> </td>
<td bgcolor="#FF9999"> </td>
<td bgcolor="#FF6666"> </td>
</tr>
<tr bgcolor="#FFFFCC">
<td>setting</td>
<td>cell</td>
<td>color</td>
</tr>
</table>
| setting | cell | color |
Nested tables: page layout can be refined by placing tables inside other tables
<table width="200" border="1" cellspacing="0" cellpadding="0" height="200" bgcolor="#FFCCCC">
<tr height="100">
<td width="100"> </td>
<td width="100">
<table width="100" height="100" border="1" cellspacing="0" cellpadding="0" bgcolor="#FF9999">
<tr>
<td width="50" height="50"> </td>
<td>
<table width="50" height="50" border="1" cellspacing="0" cellpadding="0" bgcolor="#FFFFCC">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="50" height="50"> </td>
<td width="50" height="50"> </td>
</tr>
</table>
</td>
</tr>
<tr height="100">
<td width="100" height="100"> </td>
<td width="100"> </td>
</tr>
</table>
|
|||||||||
Using tables for images: tables can be used to hold images that have been sliced into parts to achieve special effects and for navigation
| table 1 | table 2 |
A table of attributes: some table and cell attributes
| Table attributes <TABLE> | |
| WIDTH=N or N% | pixels or percent of window |
| HEIGHT=N or N% | pixels or percent of window |
| BORDER=N | pixel width of table and cell border |
| BGCOLOR="#RRGGBB" | background color |
| BACKGROUND="image_file" | background image |
| CELLSPACING=N | space between cells |
| CELLPADDING=N | space between edge of cells and content |
| ALIGN=LEFT, CENTER, RIGHT | horizontal alignment of table |
| Cell attributes <TR> and <TD> | |
| WIDTH=N or N% | pixels or percent of table |
| HEIGHT=N or N% | pixels or percent of table |
| ALIGN=LEFT, CENTER, RIGHT, JUSTIFY | horizontal alignment of cell contents |
| VALIGN=TOP,MIDDLE,BOTTOM,BASELINE | vertical alignment of cell contents |
| BGCOLOR="#RRGGBB" | background color |
| BACKGROUND="image_file" | background image |
| COLSPAN=N | number of columns spanned by cell |
| ROWSPAN=N | number of rows spanned by cell |
| ALIGN=LEFT, CENTER, RIGHT | horizontal alignment |
Attribute precedence: inside attributes take precedence
FRAMES
Frames divides a browser window into sections. Each section can display a different HTML document. Links in one frame can update pages in another frame.
Frameset: the frameset defines the layout (or shell) of the web page, including the number, position and size of frames and the initial pages that load into each frame.
A simple frameset: the framset is an HTML file with <FRAMESET> tags in place of <BODY> tags. <NOFRAMES> tags can be used for browsers that do not support frames.
<html>
<head>
<title>Simple Frameset</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="100,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="top.htm" >
<frame name="mainFrame" src="main.htm">
</frameset>
<noframes>
<body bgcolor="#FFFFFF">
This page requires a browser with frame support.
</body>
</noframes>
</html>
| simple frameset |
Specifying sizes: frame sizes for ROWS and COLS attribute can be specified in three ways
<frameset cols="100,400"><frameset rows="25%,50%,25%"><frameset cols="100,* rows="100,*">Frame: the <FRAME> tag specifies the name of the frame and the
source (or link) to the HTML document that will be displayed in the frame, <frame
name="mainFrame" src="main.htm"> Frames are listed from top row to
bottom row moving across columns from left to right
| 2 rows | 2 columns | 2 x 2 |
Navigation and linking: links specified in a frame will load into the
same frame unless a target frame is specified using the <TARGET> attribute,
<A HREF="filename.htm" TARGET="mainFrame">.
Targets can be other named frames or predefined targets (begin with underscore)
| targeting |
To frame or not to frame: Although frames provide a lot of control over the structure of web pages and allow the display of more than one page at a time, they have a number of disadvantages that should be considered
| Pro | |
| Workflow | update single page instead of many |
| Navigation | consistent navigation page that doesn't need to be reloaded |
| Header | consistent header/logo that doesn't need to be reloaded |
| Composition | can use to create good visual effects |
| Con | |
| Production | complicates site development |
| Confusing | can be confusing to navigate |
| Printing | cannot print entire frameset, only individual frames |
| Searching | search engines may not access site properly |
| Bookmark | typically can only bookmark frameset, not other pages |
| Composition | can create poor visual efects |
A design process for frames: