Tables

Basic Table Elements
Formatting the table
Formatting the row
Formatting the cell
Other attributes

What can I use tables for?:
• text-alignment: tables will help line up text in columns and rows (makes it easier to read, especially since there are no "tab" codes), especially helpful with forms - Example: http://www.musc.edu/ccit/helpdesk/online_request.html
• can separate sections of a page (use different colored cells, borders, images)
• can align images with text
• can set width in pixels or percentage to render text and graphics appropriately in various window sizes
• display data (in spreadsheet format)
• alternative page layout, when trying to avoid frames, but still have separate sections of a page - http://www.musc.edu/fanda/
• to put items beside each other (in a row) that would otherwise have line breaks between them (images, form elements, blocks of text, multiple tables)

What are some problems with using tables?
• lots of code - easy to get confused, especially with embedded tables (one table within another table), sometimes hard to find content.
• some appearance characteristics can't be applied to the entire table at once (color, text) - you have to define in each cell - this can be tedious, depending on the size of your table.

Basic Table elements:

<table> <tr> <td>Name</td> <td>Date</td> </tr> <tr> <td>Kristi</td> <td>September 17</td> </tr> </table>

opening table tag opening table row tag - begins the row first cell: opening table data tag, data/text, closing table data tag second cell (same row): same as above closing table row tag - ends the first row second row begins - opening table row tag first cell in 2nd row - opening table data tag ... closing second cell in 2nd row - same as above closing second row closing/ending table

Name Date Kristi September 17

<table>            <tr>            <tr> <td>...</td> <td>...</td> <td>...</td> <td>...</td> </tr> </tr> </table>

The above table code is defining two rows with two cells each.
<tr> begins the "table row." The first row of cells is completed and closed before the second row begins (is opened).
<td> sets up the table data; each <td> is a cell. The number of these defined inside a row (<tr>) is the number of columns the table has.
Each tag must be closed.

Formatting options:

Items that affect the entire table:
border     width/height     background     alignment     spacing in and between cells

1. border thickness - <table border="1">

   border="1" second cell third cell fourth cell

   border="6" second cell third cell fourth cell

   Note - the default is no border or border="0"; the thickness applies to the lines surrounding the outside of the table. When turned on, a border will appear around each cell.
   
   
2. Size - width/height - <table width="75%" height="600">
   
   Note - width and height can be determined in either percentage or pixel values. Defining width or height is optional. It will help your browser determine the table size when loading the page, before it receives all the contents - especially helpful if you're table contains an image. Setting a size in pixels means it will be rendered in that size, no matter what size the browser window is. This will keep your contents from wrapping at odd increments. Setting the size in percentage means the table will adjust its size according to the size of the browser window.
   
   
3. background color - <table bgcolor="#FFFFCC">
   
   

   first cell	second cell
   third cell	fourth cell

   
   Note - colors the entire table. Using the bgcolor within a row will override this color.
   
   
4. background - <table background= "http://www.musc.edu/ medcenter/logo/logosm.gif">
   
   

   cell 1	cell 2	cell 3	cell 4	cell 5	cell 6
   cell 1	cell 2	cell 3	cell 4	cell 5	cell 6
   cell 1	cell 2	cell 3	cell 4	cell 5	cell 6
   cell 1	cell 2	cell 3	cell 4	cell 5	cell 6

   
   Note - uses an image as the background for the table, instead of a color. The image will not size itself to the table size - it will either tile or be cropped.
   
   Browser Challenge - IE will tile the image throughout the table, if needed. Netscape will sometimes start the image within each cell, instead of spanning cells to show the image.
   
   
5. align (left, right or center of page) - <table align="center">
   
   
6. cellpadding - <table cellpadding="12">
   
   

   text in a cell where the cellpadding="1"

   text in a cell where the cellpadding="12"

   Note - cellpadding is the space inside each cell - between the wall of the cell and the contents of the cell
   
   
7. cellspacing - <table cellspacing="12">
   
   

   cellspacing="1" cellspacing="1"

   cellspacing="12" cellspacing="12"

   Note - Cellspacing is the space in between each cell (uses space outside each cell, before the start of the next.)
   
   

Items that affect a row:
alignment of cell contents in a row     background color for that row

1. horizontal alignment of cell contents for the entire row - Options: left, right, center - default is left
   
   <tr align="center"> ... </tr>

   Kristi Adams

   CCIT

   Charleston, SC

   
   <tr align="right"> ... </tr>

   Kristi Adams

   CCIT

   Charleston, SC

   
   
   
2. vertical alignment of cell contents for the entire row - Options: top, middle, bottom - default is middle
   
   <tr valign="top"> ... </tr>

   Kristi Adams 123 XYZ Avenue Charleston SC 29402

   CCIT Charleston, SC

   Employee since Jan. 1999

   
   <tr valign="middle"> ... </tr>

   Kristi Adams 123 XYZ Avenue Charleston SC 29402

   CCIT Charleston, SC

   Employee since Jan. 1999

   
   <tr valign="bottom"> ... </tr>

   Kristi Adams 123 XYZ Avenue Charleston SC 29402

   CCIT Charleston, SC

   Employee since Jan. 1999

   
   
3. background color - <tr bgcolor="#FFFF66"> ... </tr>
   
   

   Kristi Adams CCIT Charleston, SC Pearl Gillians CCIT Charleston, SC Peter Plott CCIT Charleston, SC Mike Richmond CCIT Charleston, SC

   <tr> ... </tr> <tr bgcolor="#FFFF66"> ... </tr> <tr> ... </tr> <tr bgcolor="#00FFFF"> ... </tr>

   
   
   Items that affect a cell:
   vertical and horizontal alignment of cell contents     color of cell background     width/height     spanning    
   1. vertical and horizontal alignment of cell contents
      Vertical options: top, middle, bottom - <td valign="top"> ... </td>
      Horizontal options: left, right, center - <td align="center"> ... </td>
      To use both: - <td valign="top" align="center"> ... </td>
      
      
   2. color of cell background - <td bgcolor="#CCFFFF">

      Kristi Adams	CCIT	Charleston, SC			<tr><td>Kristi Adams</td> <td>CCIT</td> <td>Charleston, SC</td></tr>
      Pearl Gillians	CCIT	Charleston, SC			<tr><td>Pearl Gillians</td> <td>CCIT</td> <td bgcolor="#CCFFFF">Charleston, SC</td></tr>
      Peter Plott	CCIT	Charleston, SC			<tr><td>Peter Plott</td> <td>CCIT</td> <td>Charleston, SC</td></tr>
      Mike Richmond	CCIT	Charleston, SC			<tr><td>Mike Richmond</td> <td>CCIT</td> <td>Charleston, SC</td></tr>

      
      
   3. width/height - <td width="300" height="50"> ... </td>
      
      Note: - defining the width/height of a cell will affect all cells in that row. It's best practice to define the size for each cell affected. You can choose to define neither, only one or both.
      
      
   4. Spanning
      
      Row Span - <td rowspan="2"> ... </td>
      

      cell 1 <td rowspan="2">	cell 2	cell 3
      	cell 5	cell 6
      cell 7	cell 8	cell 9

      Note: - In the table code, cell 1 is taking up the space of cell 1 and cell 4, by spreading across two rows. So, there are three cells in row 1 (cell 1, 2 and 3); only two data cells defined in row 2 (cells 5 and 6); and three cells in row 3 (cells 7, 8 and 9).

      <table border="1">
      <TR>
          <TD rowspan="2">cell 1</td>
          <TD>cell 2</td>
          <TD>cell 3</td>
      </tr>
      <TR>
          <TD>cell 5</td>
          <TD>cell 6</td>
      </tr>
      <TR>
          <TD>cell 7</td>
          <TD>cell 8</td>
          <TD>cell 9</td>
      </tr>
      </table>
      

      
      
      
      
      
      
      Column Span - <td colspan="2"> ... </td>
      

      cell 1 <td colspan="2">		cell 3
      cell 4	cell 5	cell 6
      cell 7	cell 8	cell 9

      Note: - In the table code, cell 1 is taking up the space of cell 1 and cell 2, by spreading across two columns. So, there are only two cells in row 1 (cell 1 and 3); three data cells defined in row 2 (cells 4, 5 and 6); and three cells in row 3 (cells 7, 8 and 9).

      <table border="1">
      <TR>
          <TD colspan="2">cell 1</td>
          <TD>cell 3</td>
      </tr>
      <TR>
          <TD>cell 4</td>
          <TD>cell 5</td>
          <TD>cell 6</td>
      </tr>
      <TR>
          <TD>cell 7</td>
          <TD>cell 8</td>
          <TD>cell 9</td>
      </tr>
      </table>
      

      Other Table Features:
      <TH> - Table head (header row)
      This can be used in place of a <td> tag. It automatically formats the contents of the cell to be bold and centered. It's a good "first row" but can be used anywhere in the table. It acts the same as the table data tag, except for being already formatted. See class example - the first row is defined by <TH> with an added background color.
      
      Formatting text in a cell
      Formatting text (bold, italics, color, size) inside a table cell, must be done around the text element. It can not be controlled within the table definition. So if you want two rows to appear in italics, you will need to format the text in each individual cell for italics. There's no way to use text attributes within the row or data cell tags.
      
      Embedded tables
      Embedded tables is having a table inside another table. You can place the new table inside any table data cell. Just be very careful to keep track of all your closing table tags and make sure you've closed not only your inside table tags, but also your data cell and row tags outside the embedded table.
      Next --> Tables Exercise