Tables

Tables

Tables are used for aligning the content. They are very useful as we can place the content as we are aware of the rows and columns while designing. The tables are written as shown below:
<TABLE BORDER="1">
<TR>
<TD>top left</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom right</TD>
</TR>
</TABLE>
top left
top right
bottom left
bottom right

Here is what it would look like without a border:
<TABLE>

<TR>
<TD>top left</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom right</TD>
</TR>
</TABLE>
top left
top right
bottom left
bottom right

You can simple add more rows by adding another <TR> with the columns. Here is an example with five rows:
<TABLE BORDER="1">
<TR>
<TD>top left</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>row 2 - left</TD>
<TD>row 2 - right</TD>
</TR>
<TR>
<TD>row 3 - left</TD>
<TD>row 3 - right</TD>
</TR>
<TR>
<TD>row 4 - left</TD>
<TD>row 4 - right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom right</TD>
</TR>
</TABLE>
top left
top right
row 2 - left
row 2 - right
row 3 - left
row 3 - right
row 4 - left
row 4 - right
bottom left
bottom right

You can also add columns by just adding a <TD> in each of the rows. Here is an example:
<TABLE BORDER="1">
<TR>
<TD>top left</TD>
<TD>top - column 2</TD>
<TD>top - column 3</TD>
<TD>top right</TD>
</TR>
<TR>
<TD>bottom left</TD>
<TD>bottom - column 2</TD>
<TD>bottom - column 3</TD>
<TD>bottom right</TD>

</TR>
</TABLE>
top left
bottom left

<TH> can be used instead of <TD>. The difference between the two is that TH is bolded and centered, whereas TD
is left aligned and unbolded. There are also many more attributes for each column and row as well as the tables.

top - column 2
bottom - column 2

top - column 3
bottom - column 3

top right
bottom right

Much more...

There are also many more attributes and elements that I did not cover. However this covers the maximum basics for building a simple HTML page.

<<Previous ChapterNext Chapter>>