Week Two, Day Three - Space In Your Table
So, you have a table, black border of 3px.
| This is table data #1. | This is table data #2. |
| This is table data #3. | This is table data #4. |
See the fact that the table data borders have space between each other? You can control this. Go to the table tag, and type:
cellspacing="0"
Now it will be gone.
| This is table data #1. | This is table data #2. |
| This is table data #3. | Look! No space! |
Yay!
Text inside table cells can be treated just exactly like text outside of table cells. You can put P and BR and A href and images inside table cells.
But see how it's all squished up next to the table wall? There's something you can do about it. Think of this like..... insulation in a house wall.
cellpadding="10"
This command is what it says: padding for a cell. (And I bet I didn't have to tell you that it went in the TABLE tag, did I? ^_^)
| This is table data #1. | This is table data #2. |
| This is table data #3. | Look! Space! |
Now you can do all sorts of spiffy things to tables.
| Border of 6 | Bordercolor of 008080 |
| cellspacing of 3. | cellpadding of 20 |
| Width of 70%, Border of 1 | Bordercolor of 800080 |
| cellspacing of 20. | cellpadding of 3. |
Now, what if you wanted a blank table data, but didn't want a random hole in your table? If you leave a TD empty, the browser just sort of omits the whole cell.
| This table.... | |
| ... is misshapen. |
You can insert a command called the 'nonbreaking space' into the cells.
| This table.... | |
| ... has 4 cells! |
" " is a very useful command. You know that browsers ignore white space in your code? This inserts white space for you. Nifty, isn't it? And " " can be used outside of tables, too. That's how I have indents: use three " "
So, fiddle around with all of this, because tomorrow the potential for confuzzion triples. ^_^
Week Two, Day Four: Manipulating Your Table.