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
vcharlesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
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

0
vcharlesAuthor Commented:
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
0
vcharlesAuthor Commented:
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
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Tom BeckCommented:
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.

0
vcharlesAuthor Commented:
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
0
vcharlesAuthor Commented:
Hi again,
Is it possible to alternate the Background color of the table from the Tag section?
Victor
0
Tom BeckCommented:
If the table were to be fixed at a height of say 900px, but the combined height of all rows was only 600px, then the table height would have to be reduced to 600px. This is because technically, tables cannot hold anything that creates space on a page except table cells that are in table rows. So the answer to the question is yes, you would have to insert blank rows to get the table to render taller than the just the sum of the height of the rows with data in them. That being said, you can achieve what you want in other ways. One way would be to let the table height be whatever it is (the default rendering) and use a div wrapper around the table to get the box with the red border to render as tall as you want it. Sample below.

You can change the background color of the table in the table tag itself, but not by using table attributes. Instead, use inline css.

<table cellpadding="0" cellspacing="0" class="mainTable" style="background-color:#def">

Of course, it would be better to just add that style to the mainTable class.

    <style type="text/css">
        * {margin:0 auto; padding:0}
        #wrapper { height:900px;width:800px;border:solid 1px red }
        .mainTable { width:800px;table-layout:fixed;background-color:#def }
        .mainTable td { padding:10px;height:200px }
    </style>

The background color of specific table cells can be changed in a similar manner.
<!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}
        #wrapper { height:900px;width:800px;border:solid 1px red }
        .mainTable { width:800px;table-layout:fixed }
        .mainTable td { padding:10px;height:200px }
    </style>
</head>
<body>
<div id="wrapper">
<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>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
vcharlesAuthor Commented:
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.

0
Tom BeckCommented:
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.
0
vcharlesAuthor Commented:
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
0
Tom BeckCommented:
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

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.