HTML multiple table column issue

Question

I have one question regarding the HTML tables that I couldn't manage to find myself.

Is it possible to create this layout using HTML and inline css within one table?

enter image description here

I tried to merge my cells in 4th row (I've started with 3 column layout) because I need 2 cells, and if my table width is 640px, and I force 320px for both cells, whole table gets messed up.

EDIT: 4th row is the issue, I need 2 equal width cells in it.

Thanks in advance.

I have a colspan on 3rd row, 4th row is my problem. I can't get 2 equal width cells in it. — Kosta
– Kosta, Commented Oct 22, 2014 at 12:22
If you want that sort of layout, the odds are you shouldn't be using a table in the first place. — Quentin
– Quentin, Commented Oct 22, 2014 at 12:24

Magicprog.fr · Accepted Answer · 2014-10-22 12:25:47Z

2

<table border=1>
  <tr>
    <td colspan="4">Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td colspan="2">Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td colspan="4">Cell</td>
  </tr>
  <tr>
    <td colspan="2">Cell</td>
    <td colspan="2">Cell</td>
  </tr>
</table>

answered Oct 22, 2014 at 12:25

Magicprog.fr

4,1204 gold badges29 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Victor · Accepted Answer · 2014-10-22 12:23:47Z

1

All cells in the same column have to be the same width, so you need an extra column:

First row: one cell colspan=4
second row: one cell, on cell colspan=2, one cell
Third row: one cell colspan=4
Fourth row: one cell colspan=2, one cell colspan=2

The widths for each column then look something like:

Column 1 is narrow, let's say width=50px
Column 2 is 320 - column1's width, 280px
Column 3 same as 2, 280px
Column 4 same as 1, e.g. 50px

answered Oct 22, 2014 at 12:23

Victor

9,2793 gold badges29 silver badges40 bronze badges

1 Comment

Kosta Over a year ago

Thanks, I will choose this one as a right answer because you answered my question first.

yuriy · Accepted Answer · 2014-10-22 12:29:30Z

0

<table border="1">
        <tr>
            <td colspan="4">cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td colspan="2">cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td colspan="4">cell</td>
        </tr>
        <tr>
            <td colspan="2">cell</td>
            <td colspan="2">cell</td>
        </tr>
    </table>

answered Oct 22, 2014 at 12:29

yuriy

212 silver badges8 bronze badges

Comments

Deepak Biswal · Accepted Answer · 2014-10-22 12:31:31Z

0

<table border="1" width="100%">   
   <tr>
    <td colspan="4">Cell</td>   
   </tr>   
    <tr>
    <td width="10%">Cell</td>
    <td colspan="2">Cell</td>
    <td width="10%">Cell</td>   
   </tr>   
    <tr>
    <td colspan="4">Cell</td>   
  </tr>   
  <tr>
    <td colspan="2" width="50%">Cell</td>
    <td colspan="2" width="50%">Cell</td>   
 </tr>

Check the DEMO

answered Oct 22, 2014 at 12:31

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

Comments

Srihari Goud · Accepted Answer · 2014-10-22 12:33:54Z

Use like this. it works

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    td{
        text-align:center;
    }
    </style>
    </head>

    <body>
    <table width="640" cellspacing="5">
      <tr>
        <td colspan="4">Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td colspan="2">Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td colspan="4">Cell</td>
      </tr>
      <tr>
        <td colspan="2">Cell</td>
        <td colspan="2">Cell</td>
      </tr>
    </table>

    </body>
    </html>

Collectives™ on Stack Overflow

HTML multiple table column issue

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related