Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Difficulty in getting a table to format correctly

Posted by: Dave R Sep 17 2021, 06:51 AM

Dear All

I am attempting to complete a past paper question with my students. The question asks for a table 1200px wide,
the first row is made up of 3 x 400 x 300 cells
the second row is 1 x 1200 x 250 cell
the third row is 1 x 1200 x 150 cell
the fourth row is 2 x 600 x 300 cells.

Up to the final row, the table appears as expected - the fact the final row effectively divides the row in the centre means we would need to use a colspan in the first row so the middle cell is colspan=2. However, as soon as the final row goes in, the first and last row get distorted, and I can't get the two cells in the bottom row to balance correctly. Here's my code:

CODE
<table style = "border:4px solid black; border-collapse:collapse;">
            <tr style = "height:300px;">
                <td style = "border:2px solid black; width:400px;">A</td>
                <td colspan = 2 style = "border:2px solid black; width:400px;">B</td><!--colspan to allow the bottom row the chance to divide this cell -->
                <td style = "border:2px solid black; width:400px;">C</td>
            </tr>
            <tr style = "height:250px;">
                <td colspan = 4 style = "border:2px solid black; width:1200px;">D</td>
            </tr>
            <tr style = "height:150px;">
                <td colspan = 4 style = "border:2px solid black; width:1200px;">E</td>
            </tr>
            <tr style = "height:300px;">
                <td colspan=2 style = "border:2px solid black; width:600px;">F</td>
                <td colspan=2 style = "border:2px solid black; width:600px;">G</td>
            </tr>
        </table>

Any suggestions on how to get it to appear correctly would be very much appreciated. Thanks in anticipation,

Dave

Posted by: pandy Sep 17 2021, 07:52 AM

I probably don't understand, because the table looks as you describe it should. I don't see that anything is distorted. unsure.gif

Posted by: Dave R Sep 17 2021, 09:20 AM

Hi Pandy

Certainly in Google Chrome, when I view it, in the bottom row, the dividing line between cells is not in the centre. With a bit of experimenting, if you change the top row to four columns without the colspan and make the middle two only 200 wide, it works as expected, but beyond that, the dividing line in the bottom row seems to hit about 2/3 of the top middle cell, and that cell is distorted to look wider than the ones either side. I wish I could attach a screen grab, but it seems to want urls for images sad.gif

A bit more tinkering and if I change the code for line 4 (row 1 second td) to

CODE
<td colspan=2 style = "width:200px;">
it works as expected, i.e. the spanned cell is 400px wide and the dividing line between the two cells in the bottom row hit in the middle. But if I make the spanned middle cell 400, the dividing line from the bottom hits at around 800 px from the left. This is only necessary when the final row is present, i.e. it works as expected with a colspan of 2 and a width of 400px until the final line is added. It is as though the colspan=2 in the bottom row is reading as though it is spanning the first AND second cells even though the second cell is spanning two columns. blink.gif

Posted by: pandy Sep 17 2021, 11:06 AM

I don't have Chrome. But I have other chromium based browsers and in those the cells in the top don't have the same width. The middle one is larger than the the other two. But the bottom row is perfect.
It seems the problem with the top row goes away if you give the table a fixed width though (the sum of the width of the cells + borders).

Posted by: Dave R Sep 17 2021, 12:00 PM

Indeed it does! Thanks Pandy.

I am not sure why that should be necessary, as the total width of each row is 1200px anyway, but your suggestion provides a working solution.

Regards

Dave

Posted by: pandy Sep 18 2021, 04:10 AM

Me neither. I tested in several other browsers, only chromium misbehaved.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)