NekosHTML |

Tables:

Tables are a great way to divide a page and organise how your page looks. A table is basically a grid made up of columns and rows. Each little box is called a cell. Your text, pictures, or whatever you'd like to post goes inside the cells.

To create a table, you need to start and end it. To start a table, you have to type <table>, and to end the table, type </table>. What goes between the start and end tags depends on what type of table you want. Every table has at least one row. A table row is one horizontal row made up of x number of table data cells. It is completely up to you what you put into each cell. You can enter text, images, links...anything you'd like. If you want to create a table with two columns and one row, you need to type:

<table>
<tr> - start table row
<td> - start table data cell
type your text or image tags here
</td>
<td> - start the second table data cell
type your text or image here
</td>
</tr>
</table>

It will now look like this:

This is the first data cell...

...and this is the second. Woo hoo I have created my first table!

You can have any number of table rows and data cells, as long as you remember to end each tag. The main thing to remember is to start with a <tr>. Adding extra <tr>'s will add extra rows, and adding extra <td>'s will create an extra cell. If you want to add an extra cell or row, make sure you end the one before it before starting a new one. Changing the look of your table
You can change the appearance of your table by making each cell a different colour or changing the border size and colour.

If you just type <table>, then by default the table will have no border. If you want to make your table stand out you can add a border by typing <table border="1">. This will make a thin border appear around your table, as you can see below:

the border size 1

To change the colour of the border, you use a similar code to changing background colour. Simply type <table border="1" bordercolor="red"> to make a table with a thin red border. You can either use hexadecimal codes or type in the names of common colours. It will look something like this:

the border colour is red

Changing the colour of the table
Changing the colour of a table is very simple. When you start a table, you just need to say what colour you want the table to be. In this case, I want a light blue (CCCCFF)table, so I type <table border="1" bgcolor="CCCCFF">

background colour is CCCCFF

If you want to change the colour of just one row or cell, you type bgcolor="CCCCFF" inside the start td or tr tag, like so:

<tr bgcolor="CCCCFF">
<td bgcolor="CCCCFF">

Now you can change the appearance of your table to look exactly as you want it. The last thing you will need to know about tables is how to change their size. If you don't specify a height or width, the table will try to fit in your text or pictures automatically. This may not look exactly how you want it, however. To set the width of an entire table, you just need to say how many pixels or what percentage of the screen you want it to span. The average webpage is about 600 pixels in width. It is completely up to you what size you set. You just need to type width="your value" when you start your table. For example:

<table width="600"> or <table width="70%">

Then you just type the rest of your table as normal. Height works in the same way as width, it just insn't normally used. To set the height, you just type height="your value". You can set the height and width at the same time by typing:

<table width="600" height="400"> or <table width="70%" height="50%">

Final Code: