|
|
|
|
 |
How to Create Tables in HTML – Pt. 1 Creating tables by hand isn’t as hard as you’d think! Most web page design packages make it very easy to create your own tables. Sometimes though you might want to fine-tune them by hand. Other people may just use Notepad for creating HTML code and for those keen individuals there is only one way to do things. Let’s look at how to create tables in raw HTML. The Basics You define the start and end of a table using the <table> and </table> tags. Anything between these two tags is assumed to be either the structure or contents of a table. Tables are described using a series of table row instructions and these are defined using <tr> and </tr>. The individual cells themselves are described using <td>and </td>. Let’s look at an example. <table border=”1”> <tr> <td>Row 1/Cell 1</td> <td>Row 1/Cell 2</td> </tr> <tr> <td>Row 2/Cell 1</td> <td>Row 2/Cell 2</td> </tr> </table> The resulting table looks something like this:
You’ll notice that the <table> tag has an attribute of border=’1’ added. Without this, the table would have no border. The higher the number, the thicker the border. In most cases you want the table to have a visible border but not always. You would probably want to suppress the border if you were using a table to help align blocks of text to assist with the overall look of a page. We’ll save that for advanced users though. Assuming you are creating a normal type of table, you’ll want to add some column headings. This is done using the <th> and </th> tags. Let’s see that in action. <table border=”1”> <tr> <th>First Heading</th> <th>Second Heading</th> </tr> <tr> <td>Row 1/Cell 1</td> <td>Row 1/Cell 2</td> </tr> <tr> <td>Row 2/Cell 1</td> <td>Row 2/Cell 2</td> </tr> </table> The Heading is a row in its own right and so has <tr> and </tr> tags around it just like any other row. This code produces table as follows:
What about handling blank cells? If you just have a <td></td> pair of tags, you’ll notice the empty cell loses its border and looks a bit odd. To avoid this, include a non-breaking space to ensure the table draws correctly e.g. <td> </td> Colours What about adding a little colour? The background can be changed using the bgcolor tag. If you want the whole table to be the same colour, add bgcolor to the <table> tag as shown here: <table border=”1” bgcolor=”blue”> <tr> <th>First Heading</th> <th>Second Heading</th> </tr> <tr> <td>Row 1/Cell 1</td> <td>Row 1/Cell 2</td> </tr> <tr> <td>Row 2/Cell 1</td> <td>Row 2/Cell 2</td> </tr> </table> This code when viewed in a browser will look something like this:
You can shade individual parts of the table different colours by putting the bgcolor tag wherever you want a particular colour. Consider this block of HTML code: <table border=”1”> <tr> <th>First Heading</th> <th>Second Heading</th> </tr> <tr> <td bgcolor=”red”>Row 1/Cell 1</td> <td bgcolor=”blue”>Row 1/Cell 2</td> </tr> <tr> <td bgcolor=”green”>Row 2/Cell 1</td> <td>Row 2/Cell 2</td> </tr> </table> This creates a table as shown here:
Notice that where a cell has no bgcolor e.g. Row 2/Cell 2, it stays uncoloured, it doesn’t ‘remember’ the colour from the previous cell. In part 2 I’ll show you how to adjust the alignment of text and cell spacing within a table.
|
