How to format TABLES in html - read details please.?
I want to format webpage with 3 columns. Left and Right column 150 pixels wide, the middle column I want to expand to fit the user's resolution. Dreamweaver/Front Page seem to want to expand ALL columns if screen size expands. I just want middle column to expand - Left and right column should STAY at 150PX. Help! Thanks.
Public Comments
- i believe you can specify you column size in cell/ table properties i don't remember which
- Start by creating your first table which will have 1 row & 3 columns, click in the left column & insert another 1 row 1 column table. Resize the width of the newly created table to 150 pixels, repeat this process in the right column of the original table. Click in the centre cell of the original table and set the cell width to 100 % Hopefully this has provided you with a quick resolve to your question.
- The side data cells need to have a set width and the middle data cell with no width attribute set. The table needs a width of 100%. Example: <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="150">insert info here</td> <td>insert info here</td> <td width="150">insert info here</td> </tr> </table> However, to accomodate ALL browsers and to fit the standard of HTML 4.0 and XHTML 1.0, Cascading Style Sheets need to be implemented. You can use an external style sheet or an internal one. An internal example of the attributes you would use are: <style type="text/css"> .table1 { width: 100% } .datacella { width: 150px } .datacellb { width: 150px } </style> with the table using these attributes: <table border="0" cellspacing="0" cellpadding="0" class="table1"> <tr> <td class="datacella">insert info here</td> <td>insert info here</td> <td class="datacellb">insert info here</td> </tr> </table>
- <html> <head> <title>No tables three column layout</title> </head> <body> <div style="position:absolute; top:0; left:0; width:150px; background:yellow; height:100%"> <p>Left column</p> </div> <div style="margin:0 150px 0 150px"> <p>Central column</p> </div> <div style="position:absolute; top:0; right:0; width:150px; background:yellow; height:100%"> <p>Right column</p> </div> </body> </html> I know you emphasized "TABLES" but I had to offer you at least one alternative ;O)
Powered by Yahoo! Answers