Basic Tables
Every thing you place on your page can be difficult to control. Using some basic tables can make your code easier to control and adjust. When editing tables I like to have a border at least 2px so I can see what is going on. Think of the table as a border that contains everything inside.
Tables can contain images or text.
Table Tags:
Tables have 3 basic tags:
<TABLE> Begins a table
<TR> Rows: When you add a <TR> tag you create a new row (i.e. box below)
<TD> Columns: When you add a <TD> tag you create a new column (i.e. box next to)
As always with every tag there is an end tag.
</TABLE> Ends a table
</TR> Ends a row
</TD> Ends a column
Basic Table Examples:
Code: Output:
<TABLE>
<TR>
<TD>
Box 1
</TD>
<TD>
Box 2
</TD>
</TR>
<TD>
Box 3
</TD>
<TD>
Box 4
</TD>
<TR>
</TABLE>
Code Explained:
<TABLE> Creates the table
<TR> Starts row 1
<TD> Starts column 1
Box 1
</TD> Ends box 1
<TD> Starts column 2
Box 2
</TD> Ends box 2
</TR> Ends entire row 1
<TD> Opens Column 1 on row 2
Box 3
</TD> Ends box 3
<TD> Opens column 2 row 2
Box 4
</TD> Ends box 4
</TR> Ends entire row 2
</TABLE> Ends the table
The more <TD> tags you add the more columns you create.
The more <TR> tags you add the more rows you create.
<TABLE>
<TR>
<TD>
Box 1
</TD>
<TD>
Box 2
</TD>
</TR>
<TD>
Box 3
</TD>
<TD>
Box 4
</TD>
</TR>
</TABLE>
You can add or remove tags to make tables as big and complex or as small and simple as you like.
To make one big simple box you simply need the following code:
<TABLE>
<TR>
<TD>
Text or Image here
</TD>
</TR>
</TABLE>