asked on

Help with formating tables

Hello,

I;m using a table in each View of the multiview control and I need the tables to be placed at the center of the form, show a border and to fix the size of the table (L & W) regardless of how many colums are in the table. How do I set those conditions in the table tag?

Thanks,

Victor

Tom Beck

You would not be able to set all those conditions in the table tag, but you could do it with css. Here's an example of a table with a fixed width, regardless of how many columns, with a red table border, centered on the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">        
    <title>Untitled</title>
    <style type="text/css">
        * {margin:0 auto; padding:0}
        .mainTable { height:auto;border:solid 1px red;width:700px;table-layout:fixed }
        .insideTD2 { padding:10px }
    </style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="mainTable">  
    <tr>
        <td class="insideTD2">um ullamlore accumsan. </td>  
        <td class="insideTD2">lamcorper dolore vulputate commodo. </td>  
        <td class="insideTD2">Quis ipsum ullamcorlum illum suscipit zzril  nonummy dolore, dolore accumsan. </td>  
        <td class="insideTD2">ie nostrud qui velit molestie zzril at eumnonummy dolore, dolore accumsan. </td>  
        <td class="insideTD2">orper dolore vulputate commodo suscipit eupat,  , dolore accumsan. </td>          
        <td class="insideTD2">elit molestie zzril at eum ut volutpat,  c </td>
        <td class="insideTD2">ostrud qui velit molestie zzril at eum ut volutpat,  conlore accumsan. </td>  
        <td class="insideTD2">ate csequat feugait aliquip a, dolore accumsan. </td>        
    </tr>
    <tr>
        <td class="insideTD2">um ullamcorper dolo at eum ut volutpat,  consequat feugait aliquip amet. Laoreet illum </td>  
        <td class="insideTD2">lamcorper dolore vuleet illum illum suscipit zzril  nonummy dolore, dolore accumsan. </td>  
        <td class="insideTD2">Quis ipsum ullamcorlum illum suscipit zzril  nonummy dolore, dolore accumsan. </td>  
        <td class="insideTD2">t feugait aliquip amet. Laoreet illum illum suscipit zzril  nonummy dolore, dolore accumsan. </td>  
        <td class="insideTD2">orper dolore vuuscipit zzril  nonummy dolore, dolore accumsan. </td>          
        <td class="insideTD2">elit molestie zzril ummy dolore, dolore accumsan. </td>
        <td class="insideTD2">ostrud qui velit molestie zzril anonummy dolore, dolore accumsan. </td>  
        <td class="insideTD2">ate commodo suscipit eum duis  delenit dolore, dolore accumsan. </td>        
    </tr>  
</table>
</body>
</html>

Open in new window

Victor Charles

ASKER

Hi,

Thanks for the code, I noticed I can't resize the height or width of indivual rows, how do I control table data's heigt and width?

Victor

Victor Charles

ASKER

Hi,

I am also unable to fix the height of the table when I modify your code with the code below:

.mainTable { height:900;border:solid 1px red;width:1100px;table-layout:fixed }

Is it possible to also fix the height of the table?

Victor

Tom Beck

The table will not be taller than the height of the data. You can however force the rows to be taller than the data by giving the tds a specified height.

1.) All rows one specified height so that overall table height is 900px:

.mainTable { height:auto;border:solid 1px red;width:700px;table-layout:fixed }
.insideTD2 { padding:10px;height:450px }

2.) Two specified heights to make the overall table height 900px:

.mainTable { height:900;border:solid 1px red;width:1100px;table-layout:fixed }
.mainTable td { padding:10px }
.insideTD1 { height:300px;border-bottom:solid 1px red }
.insideTD2 { height:600px }

Note that in example 2, the class name for the first row has changed to class="insideTD1".

If the number of rows is not known at runtime, you could force the table into a div with fixed height and set overflow to scroll if the table exceeds the div height.

Victor Charles

ASKER

Hi,

I want the height of the table to be the same even if I have data in only 3 rows, but I don'ty want o increase the height of the rows just to fit the size of the table. Is the only way around this, is to include blank rows?

Victor

Victor Charles

ASKER

Hi again,
Is it possible to alternate the Background color of the table from the Tag section?
Victor

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Victor Charles

ASKER

Hi.

Thanks for the explanation and code. I meant alternate Backgound color( odd rows and even rows with different colors) Is that possible?

Any ideas why I can't resize the rows width and height from the design mode when I use CCS?
For example, I can't shrink a column seem to fit the size of the text.

Tom Beck

You can definitely alternate the row colors. If you employ the technique I demonstrated earlier where you give rows different class names, you can style them differently.

.mainTable td { padding:10px;height:200px } /*general styling for all tds in rows */
.insideTD1 { background-color:#def } /*styling specific to rows 1,3,5,7, etc. */
.insideTD2 { background-color:#fed } /*styling specific to rows 2,4,6,8, etc. */

Not sure what you mean by "from design mode".

Tables have been around for a long time and behave in unique ways when compared to other block elements in HTML. They were designed originally to display tabular data in a way that attempted to eliminate a lot of guesswork for people who just wanted to display their data quickly. You just plug in your data and the columns and rows re-size automatically to make a nice presentation. Unfortunately, this makes it difficult to get any kind of granular control when you want your containers (<td>) to be specific sizes. That's why tables are being used less and less for page page layout in modern web design. Divs and other block elements are used instead. So you have to ask yourself, do I want a table to display my data with it's auto-resizing characteristics or do I want to use divs so I can have complete control? By the time you get done trying to constrain a table into the exact grid you want, you could have just used divs and you're done. If you want to use tables, then just let the table be a table.

Victor Charles

ASKER

Ok, Thanks for your explanation. How do I use divs in order to have complete control of the format of the data?

I noticed a Style tag for each of my cells, which I managed to resize the cells bu changing the values of the Width (width: 273px), but I don't think that is the best approach, I would like to see how divs works, if possible please send me an example.

.mainTable { height:1500;border:solid 1px red;width:1100px;table-layout:flexible}
.insideTD2 { padding:10px }
.style2
{
padding: 10px;
width: 273px;
}
.style3
{
width: 273px;
}
.style4
{
padding: 10px;
width: 47px;
}
.style5
{
width: 47px;
}

Thanks,

Victor

Tom Beck

What to use for a structure should be determined by the type of data you want to display in the grid and how you want it displayed. Since the data has not been revealed here, we are just talking in hypotheticals. Divs or some other block element may be better in your case or tables might be best. I just don't know without more information.

Below I've pasted two possibilities as alternatives to using tables; one with divs, one with uls. Since both are block elements, you have complete control over the size of the containers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">        
    <title>Untitled</title>
    <style type="text/css">
        * {margin:0 auto; padding:0}        
        .outerUl { width:703px;height:150px;border:1px solid red }
        .outerUl li { height:150px;float:left;list-style:none;white-space:pre-wrap }
        .li_1 { width:200px }
        .li_2 { width:148px }
        .li_3 { width:267px }
        .li_4 { width:88px }
        .outerBox { width:703px;height:452px;border:1px solid red }
        .outerBox div { float:left;height:150px }
        .col_1 { width:200px }
        .col_2 { width:148px }
        .col_3 { width:267px }
        .col_4 { width:88px }
        .row_1 { background-color:#def }
        .row_2 { background-color:#fed }
        .row_3 { background-color:#efd }
    </style>
</head>
<body>
<ul class="outerUl">
    <li class="li_1 row_1">um ullamlore accumsan.</li>
    <li class="li_2 row_1">ie nostrud qui velit molestie zzril at eumnonummy</li>
    <li class="li_3 row_1">ipsum ullamcorlum illum suscipit zzril</li>
    <li class="li_4 row_1">ostrud qui velit molestie zzril at</li>
</ul>
<ul class="outerUl">
    <li class="li_1 row_2">lamcorper dolore vulputate commodo.</li>
    <li class="li_2 row_2">Quis ipsum ullamcorlum illum suscipit</li>
    <li class="li_3 row_2">orper dolore vulputate commodo suscipit eupat</li>
    <li class="li_4 row_2">volutpat,  conlore accumsan.</li>
</ul>
<ul class="outerUl">
    <li class="li_1 row_3">nonummy dolore, dolore accumsan.</li>
    <li class="li_2 row_3">nostrud qui velit molestie zzril at eumnonummy</li>
    <li class="li_3 row_3">ipsum ullamcorlum illum</li>
    <li class="li_4 row_3">qui velit molestie zzril at eum ut volutpat,</li>
</ul>
<br />
<div class="outerBox">
    <div class="col_1 row_1">um ullamlore accumsan.</div>
    <div class="col_2 row_1">ie nostrud qui velit molestie zzril at eumnonummy</div>
    <div class="col_3 row_1">ipsum ullamcorlum illum suscipit zzril</div>
    <div class="col_4 row_1">ostrud qui velit molestie zzril at</div>
    <div style="clear:both"></div>
    <div class="col_1 row_2">lamcorper dolore vulputate commodo.</div>
    <div class="col_2 row_2">Quis ipsum ullamcorlum illum suscipit </div>
    <div class="col_3 row_2">orper dolore vulputate commodo suscipit eupat</div>
    <div class="col_4 row_2">volutpat,  conlore accumsan.</div>
    <div style="clear:both"></div>
    <div class="col_1 row_3">nonummy dolore, dolore accumsan.</div>
    <div class="col_2 row_3">nostrud qui velit molestie zzril at eumnonummy </div>
    <div class="col_3 row_3">ipsum ullamcorlum illum</div>
    <div class="col_4 row_3">qui velit molestie zzril at eum ut volutpat,</div>    
</div>
</body>
</html>

Open in new window