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.
PageTutor - Table Tutor |
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Tables Quick Reference Barebones HTML Guide |
Print version of this tutorial available - Get the PageTutor book & CD |