Table Tutor - Lesson 4
We can control where in the cell the data will appear.
<table border="3" width="100" height="75"><tr><td align="center">Ed</td>
</tr></table>
|
Ed |
<table border="3" width="100" height="75"><tr><td align="right">Ed</td>
</tr></table>
|
Ed |
<table border="3" width="100" height="75"><tr><td align="left">Ed</td>
</tr></table>
|
Ed |
As you can see, the default align
value is (usually) left. You probably already know, by the way, that the
default value is the value that the browser assumes if you have not told
it otherwise.
Note, I say "usually"
the default value is such-and-such. "Usually" mean this is how it is
for every major browser that's being used. While there is no "rule" that says the default alignment in a table cell
has to be left, it's conceivable that someone may create a web browser where
the default is center or right. It's also conceivable that a car manufacturer
might sell a neon pink automobile with lime green polka dots... but it pretty flippin' unlikely.
Ok, back to work...
we can also control where data will appear
vertically in a cell.
<table border="3" width="100" height="75"><tr><td align="left" valign="top">Ed</td>
</tr></table>
|
Ed |
<table border="3" width="100" height="75"><tr><td align="left" valign="bottom">Ed</td>
</tr></table>
|
Ed |
<table border="3" width="100" height="75"><tr><td align="left" valign="middle">Ed</td>
</tr></table>
|
Ed |
Default is usually middle.
|
|
I will take a second now to show you
something else. Images can also be used and manipulated in a table data cell.
Take Ed here, 
and save him to the
folder you are working out of (the one where you put tables1.html). Then
substitute an <img> tag for Ed.
To save an image off of a web
page, right click on it and choose Save Picture As (or something similar).
<table border="3" width="100" height="75"><tr><td align="left" valign="middle"><img src="ed.gif" width="32" height="32" alt="Ed"></td>
</tr></table>
|
|
I suppose that now is also a good
time to stress that it is good practice to include size attributes with all
your image tags. When your browser knows in advance how big your image is going
to be, it loads the page faster.