User:Sahadeva/Sandbox
Srila Prabhupada chanting japa
Overview
Tables in HTML, are relatively simple to create and modify. This is done by using these tags:
- <table> to declare a table.
- </table> to end the table.
- <th> to declare a Header cell (Table Header).
- </th> to close a Header cell.
- <tr> to declare the start of a new row (Table Row).
- </tr> to declare the end of a row.
- <td> to declare a cell (Table Data).
- </td> to close a cell.
Use
The code:
<table>
<tr>
<th>TITLE 1</th>
<th>TITLE 2</th>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
Will output:
| TITLE 1 | TITLE 2 |
|---|---|
| Contents 1 | Contents 2 |
| Contents 3 | Contents 4 |
Modifications
Border
To add a border and adjust its width, add border="'''#'''" to the <table> tag, with # replaced with the desired border width in pixels.
eg <table border="1"> will generate a table with border width 1px.
The code:
<table border="1">
<tr>
<th>TITLE 1</th>
<th>TITLE 2</th>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
Will output:
| TITLE 1 | TITLE 2 |
|---|---|
| Contents 1 | Contents 2 |
| Contents 3 | Contents 4 |
Width
To control table width, width="'''#'''" can be added to the <table> tag, replacing # with the desired width, in pixels or %.
eg <table width="400"> will generate a 400px wide table.
The code:
<table border="1" width="400">
<tr>
<th>TITLE 1</th>
<th>TITLE 2</th>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
Will output:
| TITLE 1 | TITLE 2 |
|---|---|
| Contents 1 | Contents 2 |
| Contents 3 | Contents 4 |
Or, for 75% of window width:
The code:
<table border="1" width="75%">
<tr>
<th>TITLE 1</th>
<th>TITLE 2</th>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
Will output:
| TITLE 1 | TITLE 2 |
|---|---|
| Contents 1 | Contents 2 |
| Contents 3 | Contents 4 |
Cell Padding
To control the amount of padding (space) between the contents of a cell and its borders, use cellpadding="#" to the <table> tag, with # as the amount of padding you want, in pixels or %.
eg <table cellpadding="10"> will draw a table with 10px cell padding.
The code:
<table cellpadding="10" border="1">
<tr>
<th>TITLE 1</th>
<th>TITLE 2</th>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
Will output:
| TITLE 1 | TITLE 2 |
|---|---|
| Contents 1 | Contents 2 |
| Contents 3 | Contents 4 |
Cell Spacing
The space between cells is controlled the same way as cell padding, only with cellspacing="#" used instead.
eg <table cellspacing="5"> will draw a table with 5px cell padding.
The code:
<table cellpadding="10" cellspacing="5" border="1">
<tr>
<th>TITLE 1</th>
<th>TITLE 2</th>
</tr>
<tr>
<td>Contents 1</td>
<td>Contents 2</td>
</tr>
<tr>
<td>Contents 3</td>
<td>Contents 4</td>
</tr>
</table>
Will output:
| TITLE 1 | TITLE 2 |
|---|---|
| Contents 1 | Contents 2 |
| Contents 3 | Contents 4 |