TABLE Rows & Columns

Building the TABLE Rows & Columns

Row 1 duck Cell 3 duck Cell 5
Row 2 duck Cell 4
Row 3
spacer 2

TABLE Row & Cell Colors (example 2)

More about the <tr> and <td> elements.  You can add or change the look of your data cells in both the <tr> element and the <td> element by adding different properties to the row or cell.  You will also note that I added some space around the text in each cell by using the "cellpadding" attribute in the "table" element.

The following example demonstrates the use of color to change the look of your data cells.  For instance the first row background color for each is made uniform by defining the background color in the <tr> element.

The second row does not define the background color for all cells in the <tr> element, but does define a background color in each <td> data cell.

Example 2 using color in the <tr> and <td> elements

<table border="1" style="border-color:#900" cellpadding="5">
  <tr>
    <td class="tdheader" width="60%">File Name</td>
    <td class="tdheader" width="10%">File Size</td>
    <td class="tdheader" width="10%">Date Submitted</td>
    <td class="tdheader" width="20%">Submitter</td>
  </tr>
  <tr bgcolor="#FFFF99">
    <td>File for research purposes&</td>
    <td>24 K</td>
    <td>Jan 2014</td>
    <td>Bryant Walker</td>
  </tr>
  <tr>
    <td bgcolor="#FF9966">Row 2 - Cell 1</td>
    <td bgcolor="#99FF99">Cell 2</td>
    <td bgcolor="#CCFFFF"">Cell 3</td>
    <td bgcolor="#FF99FF>Cell 4</td>
  </tr>
</table>
File Name File Size Date Submitted Submitter
File for research purposes 24 K Jan 2014 Bryant Walker
Row 2 - Cell 1 Cell 2 Cell 3 Cell 4

CLICK FOR PAGE 3 of this discussion


Previous Page Next Page