Question 251808 in Html Question posted in
Some basic documentation can be found here.

Html – Table width stretches even though explicitly limited, how to fix this?

This is what I got so far:

<center><table border="0"
        width="100%">
            <tr>
                <td></td>
                <td align="center" valign="top" colspan="8"
                bgcolor="#000000" bordercolor="#FFFFFF"><p
                align="center"><font color="#FFFFFF" face="Arial">Table title</font></p>
                </td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="1" style="text-decoration: none"><font face="Arial">1</font></a></p></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="2" style="text-decoration: none"><font face="Arial">2</font></a></p></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="3" style="text-decoration: none"><font face="Arial">3</font></a></p></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="4" style="text-decoration: none"><font face="Arial">4</font></a></p></div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="5" style="text-decoration: none"><font face="Arial">5</font></a></p></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="6" style="text-decoration: none"><font face="Arial">6</font></a></p></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="7" style="text-decoration: none"><font face="Arial">7</font></a></p></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#C0C0C0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="8" style="text-decoration: none"><font face="Arial">8</font></a></p></div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td align="center" valign="top" width="100"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 100px"></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="9" style="text-decoration: none"><font face="Arial">9</font></a></p></div>
                </td>
                <td align="center" valign="top" width="200" colspan="2"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="10" style="text-decoration: none"><font face="Arial">10</font></a></p></div>
                </td>
                <td align="center" valign="top" width="100" colspan="2"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 200px"><p
                align="center"><a href="link url"
            title="11" style="text-decoration: none"><font face="Arial">11</font></a></p></div>
                </td>
                <td align="center" valign="top" width="100"
                bgcolor="#F0F0F0" bordercolor="#FFFFFF"><div style="max-width: 100px"></div>
                </td>
                <td></td>
            </tr>
        </table>
        </center>

The problem is that it doesn’t align as it should. Each cell should be limited to 200 pixels, except for the two outer cells on the last row which should be limited to 100 pixels.

There are eleven options to choose from which I want properly aligned in a table. Since eleven is a prime number there’s always one empty cell, which I tried to solve by cutting one cell on the bottom row in two halves.

The result doesn’t look as it should, the table is much too wide and all cells are inequally wide. None of them are limited to their specified width.

I’m not using CSS, I haven’t got a clue how that works. After all I’m just a beginner with HTML.

I’m pretty sure there’s a simple thing I’m doing wrong, but what is it?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for your answer.

    I understand what you're saying and what it does, but still it's complicated to me. Keep in mind I got absolutely zero experience with CSS.

    Isn't it possible to use all that info from the CSS in the HTML itself? Can I use the tags that you put in the CSS straight in the HTML instead? Would that work?

    Oh, and in this case I don't want the cells to be wider than 200 pixels. There's very little content in them, it's not necessary.

    You might say it's easier with separate CSS and I can understand that for someone who has experience with it, it is. But to me it feels unnatural, I'd rather put more info in the HTML than use a CSS. Maybe that's fear of the unknown, but that's how I am.


  2. 0

    Hi Patrick

    I’m sorry but the whole approach is wrong…

    first of all some of the html tags you are using are deprecated second of all you are trying to use the table cells to "pad" the content of the table which is fine for a cell or two but not as a design approach.

    I suggest you take a step back to learn CSS basics & separate the CSS code.

    this will make it easier to work on the table because all of the clutter of the attributes will be gone from the html code.

    I copied your code & modified it so that:

    1. The CSS is separated
    2. The Deprecated Tags are replaced
    3. Most of the extra "padding" cells are removed from the table
    4. Most of the problematic HTML Nesting is removed
    .tableLayout{
    table-layout: fixed;
    width: 100%;
}

.centerAlignText{
  text-align: center;
}

.tableHead{
   vertical-align: top; 
   background-color: #000000;
   color: white;
   border-color: #FFFFFF;
}

.tableDataWhiteRow{
    vertical-align: top; 
    background-color: #F0F0F0; 
}

.tableDataGreyRow{
    vertical-align: top; 
    background-color: #C0C0C0; 
    bordercolor: #FFFFFF;
}




.tableDataPadding{
    vertical-align: top; 
    background-color: #F0F0F0; 
    bordercolor: #FFFFFF;
}


.fontClass{
    font-family: Arial;
    text-decoration: none;
}







/*
attributes changed:
valign to vertical-align
bgcolor with background-color
bordercolor with border-color
*/
        <div class="centerAlignText">
    <table class="tableLayout">
        
            <tr>

                <th class="tableHead" colspan="8">
                  <p class="centerAlignText">
                  <span class="fontClass">Table title</span>
                  </p>
                </th>

            </tr>
   
            <tr>

                <td class="tableDataWhiteRow" colspan="2">
                   <p>
                     <a class="fontClass" href="link url" title="1"> 
                       <span>1</span>
                     </a>
                   </p>
                </td>
                
                <td class="tableDataWhiteRow" colspan="2">
                    <p>
                        <a class="fontClass" href="link url" title="2">
                         <span>2</span>
                        </a>
                    </p>
                </td>
                
                
                <td class="tableDataWhiteRow" colspan="2">
                        <p>
                          <a  class="fontClass" href="link url" title="3">
                            <span>3</span>
                          </a>
                        </p>
                </td>
                
                
                <td class="tableDataWhiteRow" colspan="2">

                        <p>
                          <a class="fontClass" href="link url" title="4">
                            <span>4</span>
                          </a>
                        </p>
                </td>
                
            </tr>
            
            
            <tr>

                <td class="tableDataGreyRow" colspan="2">

                      <p>
                        <a  class="fontClass" href="link url" title="5">
                          <span>5</span>
                        </a>
                      </p>

                </td>
                
                
                <td class="tableDataGreyRow" colspan="2">

                        <p>
                            <a class="fontClass" href="link url" title="6">
                                <span>6</span>
                            </a>
                        </p>

                </td>
                
                <td class="tableDataGreyRow" colspan="2">

                        <p>
                            <a class="fontClass" href="link url" title="7">
                                <span>7</span>
                            </a>
                        </p>

                </td>
                
                <td class="tableDataGreyRow" colspan="2">

                        <p>
                            <a class="fontClass" href="link url" title="8">
                                <span>8</span>
                            </a>
                        </p>

                </td>
     
            </tr>
            
            
            
            
            <tr>

                <td class="tableDataPadding" colspan="1">
                </td>
                
                
                <td class="tableDataWhiteRow" colspan="2">

                        <p>
                            <a class="fontClass" href="link url" title="9">
                                <span>9</span>
                            </a>
                        </p>

                </td>
                
                <td class="tableDataWhiteRow" colspan="2">

                        <p>
                            <a class="fontClass" href="link url" title="10">
                                <span>10</span>
                            </a>
                        </p>

                </td>
                
                <td class="tableDataWhiteRow" colspan="2">

                        <p>
                            <a class="fontClass" href="link url" title="11">
                                <span>11</span>
                            </a>
                        </p>

                </td>
                
                <td class="tableDataPadding" colspan="1">
                </td>

            </tr>
            
            
        </table>
        </div>






<!--
 deprecated tags:
 <center></center>   changed to div with   text-align: center;
 <font></font>       changed to span

 -->

    Trust me it’s much easier to code with separated CSS

    BTW:Maximum cell width can’t be 200px because when the screen is stretched you typically want the cells to be wider than that…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search