The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Difficulty in getting a table to format correctly
Dave R
post Sep 17 2021, 06:51 AM
Post #1





Group: Members
Posts: 3
Joined: 17-September 21
Member No.: 28,096



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Dave R
post Sep 17 2021, 12:00 PM
Post #2





Group: Members
Posts: 3
Joined: 17-September 21
Member No.: 28,096



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2021, 04:10 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6



Me neither. I tested in several other browsers, only chromium misbehaved.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th April 2024 - 04:24 AM