html table cell text messing up everything

Question

For this code, when I add the text in the third table row it ruins the layout of all adjacent cells. Please help.

<table width="720" bgcolor="white" height="650" align="center" cellpadding="10" border="1">
    <tr valign="top">
        <td colspan="8" height="70" align="center"><img src="yooo.gif" align="middle" /> </td> </tr>
    <tr height="40">
        <td colspan="2" align="center" width="175">Home</td>
        <td colspan="2" align="center" width="175">Food</td>
        <td colspan="2" align="center" width="175">Hobbies</td>
        <td colspan="2" align="center" width="175">Martin's Blog</td>   </tr>
    <tr height="260">
        <td class="info" colspan="4" valign="top"><h2>Welcome to Nenad's Blog!!!</h2><h6>Here on this blog we will be talking about
        a bunch of random stuff that are so completely unrelated that will blow your mind.<h6></td>
        <td class="info" colspan="4">  h </td>  </tr>
    <tr height="260">
        <td class="info" colspan="4">  h </td>
        <td class="info" colspan="4">  h </td>  </tr>

This sounds really stupid, but since it's not in the code, are you closing your tag? — Christopher Marshall, May 03 '13 at 02:39
Can you show us your expecting result through a screen shot? — TNK, May 03 '13 at 02:42
my table is closed :) and I want to divide that area where the text is taking up half into 4 equal square boxes — fifiman, May 03 '13 at 02:44

score 0 · Answer 1 · answered May 03 '13 at 02:42

Your table looks good from what I can make of what you posted.

You should, however, not be using tables for layout purposes. They are supposed to be used only for tabular data, you know..like a spreadsheet.

For styling your site, you should be using CSS.

http://jsfiddle.net/3rJv7/

Code Runs

score 0 · Answer 2 · answered May 03 '13 at 02:44

0

You might have to define what "ruin" means. However my best guess is that all the colspans cause some browsers to calculate the optimum column widths poorly. I found that many browsers handle it better if your first row defines the widths, even if it's a dummy row with spacer images. I know, terrible semantically, but using tables for layouts tend to go that way.

answered May 03 '13 at 02:44

David Cummins

972
6
15

the width doesn't seem to be the problem. The height just goes crazy – fifiman May 03 '13 at 02:46
Okay. Fixing row heights can be iffy, but have a look at this question: http://stackoverflow.com/questions/2092696/how-to-fix-height-of-tr – David Cummins May 03 '13 at 04:26

html table cell text messing up everything

2 Answers2