Malorie v.2.0

HTML TABLES TUTORIAL

TABLE CODES

Here are the codes that you will use for tables to make a basic table. Codes to jazz up your table will come later. Tables are good for organizing content on a websites. Many whole webpages are designed off of tables.

<table>
This is the start of your table code.

<tr>
This is a row. You can repeat this code as many times as you want, and you will give you more rows.

<td>text goes here</td>
This is a column, it comes after you have done the row code. Repeat the code indefinitly, although it must be after the code above though.

</tr>
This is the code you put after your td code's to end the row.

</table>
This is the ending code, it comes after all your rows and colomns, after the table is done. EXTRA CODES

color
To add color to your tables, add the color to your table tag, or your row/ colomn tag.
example:

adding borders
To add a border to your tables, add the border code to your table tag, or your row/ colomn tag. Choose any number
example:

adding backgrounds
add background="URL" to any table, row, or colomn tag. For example:

<table background="yourbackground.html"> TABLE SIZES

size with pixels
you can set your table size to a certain pixel size, so it can fit a specific image or just be the size you want. to do this just copy the code below, change the sizes to what you want.

size with percentages
you can make the width or height of your table fit the percentage of the viewers screen so it will look that percentage no matter what resolution they are in. just copy/paste and edit the code below.

<table width=50%> FINISHED TABLES

Cell 1	Cell 2
Cell 3	Cell 4

the code for this table:
<table border="0" cellspacing="0"> <tr> <td bgcolor="#FF7011">Cell 1</td> <td bgcolor="#FFAE21">Cell 2</td> </tr> <tr> <td bgcolor="#F7DD83">Cell 3</td> <td bgcolor="#77E501">Cell 4</td> </tr> </table>

Cell 1 Cell 2 Cell 3 Cell 4

Cell 5 Cell 6 Cell 7 Cell 8

the code for this table:
<table border="0" cellspacing="0"> <tr> <td bgcolor="#AB0726">Cell 1</td> <td bgcolor="#AB0726">Cell 2</td> <td bgcolor="#AB0726">Cell 3</td> <td bgcolor="#AB0726">Cell 4</td> </tr> <tr> <td bgcolor="#E3D103">Cell 5</td> <td bgcolor="#E3D103">Cell 6</td> <td bgcolor="#E3D103">Cell 7</td> <td bgcolor="#E3D103">Cell 8</td> </tr> </table>

Cell 1

Cell 2

the code for this table:
<table border="1px solid 000000" cellspacing="0"> <tr> <td bgcolor="#FFFFFF">Cell 1</td> </tr> <tr> <td bgcolor="#FFFFFF">Cell 2</td> </tr> </table> REMEMBER:

The cells in the tables will expand to any size of the content you put within it. Meaning if you put alot, you can end up making a weblayout nicely organized with tables.

When adding background/ color codes to a table, adding the code to the <table> tag will make all your rows & colomns have that background. To make just a row/ colomn have it, add it to that tag.

Hosted by www.Geocities.ws