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 Rows & Columns (example 1)

Working with tables doesn't require a lot of skill, but things can go wrong if you don't format the table properly.  You will learn here about the use of the <tr> element and the <td> element and how they can be formatted to provide the most desirable table for your presentation.

The <tr> element can be used as many times as necessary for all of the data items needed.  Later, when you need to add a new item, just copy one row and paste it in the desirable place.  Then change the old data to the new data.  Don't forget to change the "URL link" for the file that the reader will access for the new data.

Notice that my example code displayed for this table has the elements in line with one another.  This helps you keep your table code clean and easy to work with as you define the table.

Example 1 using the <tr> element

<table border="1" style="border-color:#900">
  <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>
    <td>File for research purposes&</td>
    <td>24 K</td>
    <td>Jan 2014</td>
    <td>Bryant Walker</td>
  </tr>
  <tr>
    <td>Row 2 - Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Row 3 - Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td>Row 4 - Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
    <td>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
Row 3 - Cell 1 Cell 2 Cell 3 Cell 4
Row 4 - Cell 1 Cell 2 Cell 3 Cell 4

CLICK FOR PAGE 2 of this discussion


Previous Page Next Page