Creating The Table
As you may know a table is made up of rows and columns. Tables are often used to create a layout for a website and so knowing about how to create tables will prove to be a valuble commodity. To start off you table you require these tags:
<table> and </table>
Obviously there are many ways to edit your table, I will go through this later on in this part of the tutorial. Firstly I will state how to create columns and rows for your table. First thing to put into your table is: <td> and </td>
This states you have creates a column, this column will take up the entire table in height and width. You can insert as many columns in your table as you want, keep in mind that a table column goes through the whole table so you need the same amount of columns on each row (to have different amount of columns see the section 'Different Columns' below)
To create a new row it just requires you use the tag:
<tr> (you do not require a </tr>)
Thats pretty much the most basic part of creating a table, you could use this to create a table right now in you websites, but, its more than likley you would want to edit the table somewhat, if you do, just read on...
Width & Height
Editing the width and height is the same for tables as for most other things in HTML. You just add to the <table> tag. To edit the width you use: width="100" or width=100%, as you can see in the second version of editing the width I state a % value, this tells your browser to make your table whatever % of the page you state (say you create a table and make each column 50% wide, and create another table inside that (see below) you would have to make the table 100% to take up one of those 50% columns, sounds complicated, but its not)
| This column is 50% of the green column |
|
| This column is 100% of the red column |
|
I hope this is all making sense. To edit the height of the table is exactly the same, except you use the code height="100" or height=100%. For example: <table width=100% height="100">. Editing the height can also be added to any <td> tags to edit the size of each column and row.
Alignment
In the table you can tell how you want your content aligned. There are three types of alignment vertically and horizontally. You add these codes to your <table> or <td> tags. To edit the layout horizontally you add align="left" to your tag. You can edit left to have it left, center (yes all you Brits, its spelt center), or right. You can also edit how the text appears vertically with the code valign="top". You can edit the top to top, middle, or bottom. An example code is shown below:
<table width=100% height=*>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<tr>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<td colspan="2" bgcolor="0000ff">THIS IS 2 COLUMNS</td>
<tr>
<td width=33% bgcolor="0000ff">THIS IS 1 ROW</td>
<td width=33% rowspan="2" bgcolor="0000ff">THIS IS 2 ROWS</td>
<td width=33% bgcolor="0000ff">THIS IS 1 ROW</td>
<tr>
<td width="33%" bgcolor="0000ff">THIS IS 1 ROWS</td>
<td width=33% bgcolor="0000ff">THIS IS 1 ROW</td>
</table>
This produces:
| I am aligned left |
I am aligned center |
I am aligned right |
| I am aligned top |
I am aligned middle |
I am aligned bottom |
Different Columns & Rows
As I stated above columns run through the whole table, unless you tell the computer not to, this is where rowspan & colspan comes in. To make a column take up 2 spaces then you just add colspan="2" to your <td> tag. You can obviously change 2, to whatever number of columns you want. To edit the amount of rows a column takes up then you use rowspan="2", changing the 2 to whatever you want. Below is an example code:
<table width=100% height=*>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<tr>
<td width=33% bgcolor="0000ff">THIS IS 1 COLUMN</td>
<td colspan="2" bgcolor="0000ff">THIS IS 2 COLUMNS</td>
<tr>
<td width=33% bgcolor="0000ff">THIS IS 1 ROW</td>
<td width=33% rowspan="2" bgcolor="0000ff">THIS IS 2 ROWS</td>
<td width=33% bgcolor="0000ff">THIS IS 1 ROW</td>
<tr>
<td width="33%" bgcolor="0000ff">THIS IS 1 ROWS</td>
<td width=33% bgcolor="0000ff">THIS IS 1 ROW</td>
</table>
This produces:
| THIS IS 1 COLUMN |
THIS IS 1 COLUMN |
THIS IS 1 COLUMN |
| THIS IS 1 COLUMN |
THIS IS 2 COLUMNS |
| THIS IS 1 ROW |
THIS IS 2 ROWS |
THIS IS 1 ROW |
| THIS IS 1 ROWS |
THIS IS 1 ROW |
Background Colours
To change the background colour of a table, or one of its spaces requires just one piece of coding, that is, bgcolor="0000ff", changing the 0000ff to whatever colour code you want. E.g. <td bgcolor="0000ff">
Borders
You can add a border to your tables, or individual spaces. To do this just add border="2" to your <td> or <table> tags. Changing the 2 to whatever width you want for your border. E.g. <td border="2">.
Table Headers
You can create table headers for your tables, by just changing the <td> and </td> tag to <th> and </th>, this will basically bold your default font, as well as centering the text. It just shows the user what each column title is.
This is all I can think of so far, any updates will be put on the site ASAP.
工具 
說明
