HTML Table 1x1
.
.
<table border=1>
<tr>
<th>1st Col
</th>
</tr>
</table>
.
.
|
|
Web page should look like this.
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.
more about table tag...
|
HTML Table 1x3
.
.
<table border=1>
<tr>
<th>1st Col
</th>
<th>2nd Col
</th>
<th>3rd Col
</th>
</tr>
</table>
.
.
|
|
Web page should look like this.
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.
more about th tag...
|
HTML Table 2x3
.
.
<table border=1>
<tr>
<th>1st Col
</th>
<th>2nd Col
</th>
<th>3rd Col
</th>
</tr><tr>
<td>A text
</td>
<td>B text
</td>
<td>C text
</td>
</tr>
</table>
.
.
|
|
Web page should look like this.
| 1st Col |
2nd Col |
3rd Col |
| A text |
B text |
C text |
|
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.
more details on <tr>...
more details on <td>...
|
Color a row or cell
.
.
<table border=1>
<tr
bgcolor="#ff0000"
>
<th>1st Col
</th>
<th>2nd Col
</th>
<th>3rd Col
</th>
</tr><tr>
<td
bgcolor="#00ff00"
>
A text
</td>
<td>B text
</td>
<td>C text
</td>
</tr>
</table>
.
.
|
|
Web page should look like this.
| 1st Col |
2nd Col |
3rd Col |
| A text |
B text |
C text |
|
|
Make a wider row
.
.
<table border=1>
<tr bgcolor="#3355ff">
<td colspan=3 align=center>
Web Page Title
</td>
</tr>
<tr bgcolor="#ff0000">
<th>1st Col
</th>
<th>2nd Col
</th>
<th>3rd Col
</th>
</tr><tr>
<td
bgcolor="#00ff00"
>
A text
</td>
<td>B text
</td>
<td>C text
</td>
</tr>
</table>
.
.
|
|
Web page should look like this.
|
Web Page Title
|
| 1st Col |
2nd Col |
3rd Col |
| A text |
B text |
C text |
|
To color a row, just add a
bgcolor modifier to the
<tr> tag. To color a cell, just add the
bgcolor modifier to the
<td> tag.
We threw in an align=center modifier too. Our choices are left,
center and right. This can be very useful and the code is shorter than
using the <center></center> tags.
more about td tag...
|
Turn off borders
.
.
<table
border=0
>
<tr bgcolor="#3355ff">
<td colspan=3 align=center>
Web Page Title
</td>
</tr>
<tr bgcolor="#ff0000">
<th>1st Col
</th>
<th>2nd Col
</th>
<th>3rd Col
</th>
</tr><tr>
<td
bgcolor="#00ff00"
>
A text
</td>
<td>B text
</td>
<td>C text
</td>
</tr>
</table>
.
.
|
|
Web page should look like this.
|
Web Page Title
|
| 1st Col |
2nd Col |
3rd Col |
| A text |
B text |
C text |
|
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.
more about tables...
|
|
NEXT
