Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Lists
Basic Tables
Table basics
Rows and data
Borders
Width
Cellpadding & spacing
Alignment
Rowspan & colspan
You Try It
Advanced Text
Marquee
Meta
Sounds
Comments
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices
|
Table Width
TAGS USED: <table width="">
Another way you can control what your table looks like is to specify how wide you want your table. The default is to make a table barely wide enough for the information to fit inside it, but you can make a table as wide or as narrow as you'd like.
This command is also contained within the
<table> tag. Let's use a table with a border of one pixel and let's make this table as wide as the page. Here's how that would look:
| Code |
|---|
<table border=1 width=100%>
<tr>
<td> Cell #1</td>
<td>Cell #2
</td>
</tr>
<tr>
<td> Cell #3
</td>
<td> Cell #4</td>
</tr>
</table>
|
| What you see: |
|---|
| Cell #1 |
Cell #2 |
| Cell #3 | Cell #4 |
Of course, you can have a table narrower than 100%. Actually, you can define the width of your table in either percentages or pixels. Either of these may be useful. Let's say you want that same table, but this time only 120 pixels wide. Here's how you would do that.
| Code |
|---|
<table border=1 width=125>
<tr>
<td> Cell #1</td>
<td>Cell #2
</td>
</tr>
<tr>
<td> Cell #3
</td>
<td> Cell #4</td>
</tr>
</table>
|
| What you see: |
|---|
| Cell #1 |
Cell #2 |
| Cell #3 | Cell #4 |
You may also change the width of the cells (or colums) by messing with the width command as well. Here's an example:
| Code |
|---|
<table border=1 width=100%>
<tr>
<td width=70%> Cell #1</td>
<td width=30%>Cell #2
</td>
</tr>
<tr>
<td> Cell #3
</td>
<td> Cell #4</td>
</tr>
</table>
|
| What you see: |
|---|
| Cell #1 |
Cell #2 |
| Cell #3 | Cell #4 |
You'll notice that only the top cells in a column need to be defined. The others will fall into place. By using a combination of these commands, you can
make your table look a number of different ways.
|
|
|
|
|
