MMDT1021 Chapter 18 Notes - page 2

Creating a Simple Table

Code Result 
<table>
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

Adding a Border

Code Result 
<table border="1">
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

Changing the Border Color

Using BORDERCOLOR
Code Result 
<table border="4" bordercolor="green">
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

Using BORDERCOLORDARK and BORDERCOLORLIGHT
Code Result 
<table border="4" bordercolordark="maroon" 
       bordercolorlight="red">
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

Using CSS to specify a border style.
Code Result 
<table border="4" cellpadding="0"
       cellspacing="0"
       style="border-style: dashed"
       bordercolor="#008000" width="100%">
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

Setting the Width of the table

200 pixels
Code Result 
<table border="1" width="200">
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

300 pixels
Code Result 
<table border="1" width="300">
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

50 percent
Code Result 
<table border="1" width="50%">
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

Setting the Width of the cells

Left column 100 pixels, right column 200 pixels.
Code Result 
<table border="1">
  <tr>
    <td width="100">column 1 row 1</td>
    <td width="200">column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2

Left column 67% pixels, right column 33% pixels, overall table width 300 pixels.
Code Result 
<table border="1" width="300">
  <tr>
    <td width="67%">column 1 row 1</td>
    <td width="33%">column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>
 
column 1 row 1 column 2 row 1
column 1 row 2 column 2 row 2