MMDT1021 Chapter 16 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> |
|
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> |
|
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> |
|
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> |
|
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> |
|
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> |
|
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> |
|
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> |
|
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> |
|
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> |
|