Week 4

Table Tags

Tag	Tag name	Description and Example
<table></table>	Table tag set	Creative way to organize statistics, data, images, text or links. Most valuable and widely used tag sets in web design
<tr><tr>	Table Row	Creates row with all item inside in straight row. Table data cells sit inside <tr><tr>
<td><td>	Table data	Creates individual cell within row
border="#"	Border attribute	Creates line around the outside of table and around each inside cell	<table border="5">
summary=" "	summary attribute	Similar to alt= in images. Creates verbal description for non-visual browser	<table summary="Table for HTML table tags">
<caption></caption>	Caption tags	Describe table, title almost	Placed immediately after <table> tag. Only one per table
<th></th>	Table Header	Created centered heading at top of table w/ bolder, bigger typeface. Goes inside table row tag.	<tr><th>Title of Table</th></tr>
p align="center"	Paragraph align attribute	Center table on page
colspan="#"	Column span attribute	Join cells horizontally to create space that spans more than 1 column	Heading Use in <td> tag Use in <th> tag
rowspan="#"	Row span attribute	Join cells vertically to create space that spans more than 1 row	Heading on side Use in <td> tag Use in <th> tag Row 2
cellspacing="#"	Cell spacing attribute	Creates more space between cells and internal borders	<table border="1" cellspacing="3">
cellpadding="#"	Cell padding attribute	Create more space between item in cell and cell wall	<table border="5" cellpadding="10">
width="#" or "%"	width attribute	Goes in opening table tag. Use to create an even margin down page or to set the page in columns like a newspaper. Align using the align attribute with "left" "right" or "center".	<table width="220"> Example of this
valign="bottom" "top" "middle"	Vertical alignment attribute	Use in <td>: to control where to start cell contents
&nbsp;	Use in cell as empty place holder

Width can be defined by pixels or percentages. A percentage sized table is great for a mostly text page because no matter what the window or resolution size the table will maintain the same size. A width="50%" table will always show as half the browser page. The images and text will rearrange themselves without changing size.	Pixel sized tables will be that many pixels no matter what. If the screen resolution is 600 then a width="300" would show as half the page, but on a 1200 resolution screen the same width would appear as just a quarter of the page, the images and text will resize themselves.
A good tip when trying to create a borderless table is to set the border as 1 for a visual aid in creating it and when all is as you want it, resizing the border to "0" for uploading the page. Not going wider then 600 pixels will typically keep your viewers from scrolling sideways (a bother if you've ever had to do it)
Many creative ways to use tables. Tables within tables. Use a table to exactly place an image where you want it. Combine text and image. You can change the font of a cell by adding a <font face=" "> tag after a <td> tag. Adjust the size and color of font too. The background color of a table can be changed within the table tag, or change the color of a row or cell. This is ofter used to make a neutral background for text while still using a busy background image. By adjusting the width of the table you can show a "border" of busy background around the table. Defaults should always be added so that no matter what browser your table looks consistent. Defaults are: border="0" cellpadding="1" cellspacing="2". Several small tables will load faster then if your entire page is one large table. Check that cell widths are not larger then table width, very important if working with images.