Beginner's HTML Guide IV

Return to my Computer pages
Go to my home page

Beginner's HTML Guide IV - Tables

This is a table, in HTML:

	red	blue	green
red	red	violet	yellow
blue		blue	blue-green
green			green

This is pretty simple to do. Here's how you enter it into your HTML file:

<TABLE BORDER>
  <TR>
    <TD></TD>
    <TD><B>red</B></TD>
    <TD><B>blue</B></TD>
    <TD><B>green</B></TD>
  </TR>
  <TR>
    <TD><B>red</B></TD>
    <TD>red</TD>
    <TD>violet</TD>
    <TD>yellow</TD>
  </TR>
  <TR>
    <TD><B>blue</B></TD>
    <TD></TD>
    <TD>blue</TD>
    <TD>blue-green</TD>
  </TR>
  <TR>
    <TD><B>green</B></TD>
    <TD></TD>
    <TD></TD>
    <TD>green</TD>
  </TR>
</TABLE>

I started with the <TABLE> tag. But, I wanted the borders to be visible, so I used the <TABLE BORDER> option. You can provide much more formatting information. But, I am just showing the basics. The table ends with the <

TABLE> tag. Within the table are table rows, between the <TR>...</TR> tags. Everything between these tags is part of the same row. The elements, in each row, are table cells (made up of text, lists, tables...), which are placed between <TD>...</TD>. Notice that I made some of the text bold, by surrounding it with <B></B>.

A larger table can look confusing. So, it is much easier to create one with a wysiwyg html editor.

Note that none of the tags need be capitalized. But, it looks clearer, to me, when I do that.

This two-column text is a handy use for tables. I created a table made up of only two cells, one row and two columns. This is how I defined it, originally:

<TABLE>
<TR>
<TD>This two-column text is a...</TD>
<TD>First, I defined...</TD>
</TR>
</TABLE>

The second column is merely the second cell of the 1x2 table.

Formatting is a little difficult to predict, unless you do actually specify the formatting.

First, I defined the width of the table to be 100% of the user's window, by modifying the <TABLE> tag: <TABLE width=100%>. Then I made each cell in the only row 50% of the user's window, by modifying the two <TD> tags: <TD width=50%>

Then, I wanted to make sure that the top line of each column lined up with each other. So, I modified the <TR> tag: <TR valign=top>.

Then I wanted a bigger gap between columns. So, I again modified the <TABLE> tag: <TABLE width=100% cellpadding=10>

This is how it ended up:

<TABLE width=100% cellpadding=10>
<TR valign=top>
<TD width=50%>Here is a...</TD>
<TD width=50%>First, I defined...</TD>
</TR>
</TABLE>

You should experiment with formatting, to see how different options turn out.

> Note that the </TR> tag is not necessary.

Basic format:

<TABLE>
<TR><TH>
<TR><TD>
</TABLE>

Options:

<TABLE> (table must end with </TABLE> tag)

<TABLE BORDER> makes the border visible.
<TABLE BORDER=10> makes the border=10 pixels.
<TABLE CELLSPACING=10> makes the gap between the cells=10 pixels.
<TABLE CELLPADDING=10> makes a gap between the borders and the cell text of 10 pixels.
<TABLE WIDTH=1000> makes the table 1000 pixels wide.
<TABLE WIDTH=75%> makes the table width 75% of the user's screen.

<TR> table row (</TR> not necessary)

<TR ALIGN=CENTER> centers the text in each cell.
<TR ALIGN=RIGHT> right justifies the text in each cell.
<TR VALIGN=TOP> other options are MIDDLE, BOTTOM, BASELINE.

<TD> table data (can use all of the attributes of <TR> as well as these, below)

<TD WIDTH=500> makes the cell width 500 pixels wide.
<TD WIDTH=25%> makes the cell width 25% of the table width.
<TD COLSPAN=3> makes the cell span 3 columns.
<TD ROWSPAN=2> makes the cell span 2 rows.
<TD NOWRAP> no word wrap.

<CAPTION>...</CAPTION> table caption (can ALIGN=TOP or BOTTOM).

<TH> table heading (same as <TD> except that the contents may end up centered and bold)

> None of this need be in capital letters. The tags </TD> or </TH> are not necessary unless there is a conflict (tables within tables).

Return to my Computer pages
Go to my home page