HTML Table Tutorial
HTML Table 1x1
|
HTML Tables are an advanced html code you can use when you
make your own web site. Setup much like a checker board, cells are
arranged by rows and columns. Each cell holds either text or web page
graphics.
Once we learn how to adjust the cells in a table, we can put text or graphics just about anywhere we want on your own web page. |
|||
|
The table codes all reside within the <table></table> tags.
The border=1 modifier makes the lines around the table and also
between the cells. I've used this as it's easier to see the following
examples. Great layouts are possible with this cool HTML code.
The <tr></tr> tags define the rows, while the <td></td> or <th></th> tags define the columns. Notice each of these tags have the opening and closing tags. This is extremely important, as some browsers show a blank page if you get this wrong. |
||||
HTML Table 1x3
|
OK, now we add a couple of columns. This is done by including a couple
sets of <th></th> tags.
The difference between the <td> tag and the <th> tag is simply that the <th> tag treats the enclosed text like headings. Notice the indentations. This is not a requirement, but it makes matching up open/close tags so much easier. |
HTML Table 2x3
|
We can add a second row with another set of <tr></tr> tags
for rows, then fill the cells for each column using the
<td></td> tags.
If you haven't noticed the pattern, look closely at this example and compare to the last few examples. Understanding this pattern makes the process easy. |
Color a row or cell
|
|
Make a wider row
|
|
|||||||||||
Turn off borders
|
Turning off the borders just allows everything to just kind of float in
space. If you watch web pages closely as you surf, many pages use this
technique. It allows you to place items on the screen virtually anywhere
you want them.
You can especially see this on the cells B Text and C Text. |
|||||||||||
|
|
|
NEXT
|
|
