Site Development
Downloads
Help!!
Home
Sizing Cells - <td>sHere's the type of <table> we've been coding so far:
<table width=200 height=300 align="center"> The above produces a table that looks like this:
This table does the job, but it's a little boring. We can use attributes in the individual <td> tags to size the cells and align our content. We can use the WIDTH and HEIGHT attributes in our individual cells to size them. We'll soon find this to be a little trickier than sizing the overall table. Lets start out by using pixel values for width.
<table width=200 height=300 align="center"> This sizes Cell #1 to 50 pixels wide. Mind you, we haven't sized any other cells. Here's the table:
See how Cell #3 is also sized to 50 pixels? We didn't put a WIDTH attribute in it. What's important to know here is that the cells affect each other. The browser tries to render the table with consistently sized columns and rows. Setting a WIDTH in one cell will affect the width of all the cells in the same column. Setting a HEIGHT in one cell will affect all of the cells in the same row.
The above table was made by putting HEIGHT=50 in Cell #1's <td> tag -- <td width=50 height=50>. In practice, you will put WIDTH and HEIGHT in every cell affected by a WIDTH or HEIGHT in another cell. It is the nature of <table>s that the cells work together like this. The cells will make every effort to fill in the entire table no matter what sizing you use. They will size themselves to produce consistently sized rows and columns. In coding tables, make sure that your <td> sizing adds up to match your <table> sizing. Make sure your <td> WIDTHs and HEIGHTs add up to the <table>'s WIDTH and HEIGHT. This eliminates oddball positioning and sizing problems that crop up. You can also use a percentage value to size <td>s. This is often easier to keep up with. What's important to remember is that a percentage in the <td> will size it to a percentage of the <table>'s dimensions, not the page's. A cell with a width of "10%" would go 10% across the <table>, not 10% across the page.
<table width=200 height=300 align="center"> Here's the rendered table ----
Pay special attention on how I combined "10%" and "90%" WIDTHs to add up to 100% of the table's width. This represents the total row width and should equal the width of the overall table and the other rows. The same goes for HEIGHT and columns. This prevents glitchy rendering of the table. Also note that you can use percentage sized cells in a pixel sized <table> and vice versa. Percentages are used to size both the <table> and <td>s so the table looks proportionately the same at the various resolutions your viewers will be using. Pixels are used to "absolutely" size the table to look exactly the same at all resolutions. There are good uses for each type of sizing. Three things to remember about sizing <td>s: 1) The total <td> WIDTHs in each row should equal the WIDTH of the <table> or 100%. If the <table> doesn't have an overall WIDTH, the width will be set by the sum of the longest row of cells. The total WIDTHs of each row should be equal to each other. 2) The total <td>s HEIGHTs should be equal to the <table>'s declared HEIGHT. If the <table> doesn't have a HEIGHT attribute, the height of the table will be the sum of the <td>'s HEIGHTs in the longest column. The sum of HEIGHTs in each column should be equal. 3) Cells tend to size themselves based on the widest and the longest cell. These can be different cells. Even sized cells will "stretch" to maintain consistent column widths and row heights. Aligning Cell ContentCells themselves align themselves to fit the entire table based on their size. The content inside a cell can be aligned using the ALIGN attribute in the <td> tag:
<table width=200 height=300 align="center"> This would position the content ("Cell #x") like this:
You can use the usual ALIGN values -- "left" (default), "right, "center". Using ALIGN in a <td> will align all of the content in that specific cell unless other HTML tags or styling in the content change it. Vertical AlignmentBy default our cells' content has been in the middle of the cell vertically. This might not always be what we want. When two cells are side by side and one has a lot of content and the other has very little:
You can see that with a long table like this, it might be an advantage to "pull" the content of cell #2 to the top. We can do this by using the VALIGN attribute in a <td> tag: <td width="80%" align="center" valign="top"> The VALIGN above would change the above table like this:
The VALIGN attribute has three values you can use to vertically position your cells' content: "top", "middle" (default), "bottom". Large ContentLarge content, like a big image, can distort your tables. Lets say you put a large image, say 500 pixels wide, in a cell that's sized to only 10% of the width of the table. The 10% cell sizing will not affect the size of the image. Instead, the 500 pixel image will define the 10% sizing used. This means that the browser will interpret 10% of the width of the table as 500 pixels and size to overall table to 5000px! Lots of side scrolling. .The above scenario requires you to allow the image to occupy a greater percentage of the overall table. There are also advanced layout techniques to help you with this problem. If you absolutely size a cell that contains large content, the content will be "clipped" or the sizing attributes (WIDTH and HEIGHT) will be ignored and the content will size the table. As a rule, content that's nearly as wide as a page is given special treatment, spanned across several rows or columns, or put outside a table. We'll be going into these techniques shortly. ExercisesBefore moving on be sure you can make the tables below and try out putting a large image in a table cell to see how the table sizes itself and reacts. Use both relatively sized (percentages) tables and absolutely sized (pixels) tables. A Relatively Sized (percentages) Table
An Absolutely Sized (pixels) Table
|
To Next AdvancedHTML Lesson
Back To Advanced HTML Index