15

I have never much worked with Complex HTML Tables. I need a table with nested columns and rows in it. I tried to create it but it has got many tables as well as number of borders are appearing everywhere. Here is the jsFiddle, that I have tried. So, what I'm going to achieve is:

  • Single <table> tag for all that structure
  • Multiple borders should not appear.
  • All the structure should be a single table, rows should not separate from its position while resizing the page.(Which happens in my case)
Improve this question
8
  • Just out of cursiosity: what are you trying to achieve with this structure? It seems to me you're using it to style complex table cells? Commented Apr 21, 2015 at 9:05
  • @Anzeo - Yeah, that's the clients requirement. He has given a png showing that kind of structure in a table. Commented Apr 21, 2015 at 9:07
  • 1
    @trex You shouldn't use tables for layouts (E-Mail templates are fine) For a table-like layout take a look into bootstrap. For your problem: You wont get far with a single <table> tag, you cant put a <tr> inside a <td> without a <table> Commented Apr 21, 2015 at 9:10
  • @AlexG - Oh! I didn't knew that. My requirement is - Just a table with that structure. That has some input fields in last column which needs to be saved in the database Commented Apr 21, 2015 at 9:16
  • @trex If the client basically is the only person to see this layout, then it wouldn't be a big deal, just don't let that get a bad habit. If you're using a table for displaying a table e.g. displaying whats in the database. For public view I highly recomment using a different layout Commented Apr 21, 2015 at 9:27

4 Answers 4

Reset to default
7

This is your structure you wanted, do not set width to percentage value to avoid struture losing shape while page resizing

    <table border="1" width="800" height="100">
      <tr>
        <th colspan="7"></th>
        <th></th>
      </tr>
      <tr>
        <td colspan="7"></td>
        <td></td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <td></td>
        <td colspan="3"></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
    </table>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

- Perfect Solution! Thanks. So it was just the game of rowspan and colspan. Got new things to learn. Many Thanks :)
3

Well, the exact result can't be done with just one table. You have cells that appear on half the height or width of another cell. That is what won't function.

So I made you this structure, that comes as close as it gets:

<table>
    <colgroup>
        <col width="3%" span="2" />
        <col width="10%" />
        <col width="3%" />
        <col width="18%" />
        <col width="*" span="2" />
    </colgroup>
    <tr>
        <td colspan="6">x</td>
        <td>x</td>
    </tr>
    <tr>
        <td colspan="6">x</td>
        <td>x</td>
    </tr>
    <tr>
        <td rowspan="3">x</td>
        <td>x</td>
        <td colspan="3">x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr>

        <td rowspan="2">x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
</table>

Updated Fiddle

Improve this answer

2 Comments

Your solution is also sounds good. Just as a curiosity, what does span="2" do in this case?
With colgroup and col, you can define styles to the columns. So <col width="3%" span="2%" /> means that the colums should be 3% width, and it should span over two columns, in this case the first two columns.
2

Why would he want a table like that? Throw a rock at him.

Anyways, dont use border: xx xxx xxx try to always use border-bottom, border-right, so you minimize the amount of lines there.

Add background-color intermitent and on hover efects, maybe it will make it more acceptable.

Else, I don't know. pray.

Improve this answer

Comments

1

Then you have to make a global table with a row for each row that you have. And inside the cells of those rows make another table to style it as you want.

You say multiple borders should not appear, then make a class to show only the borders of the tables inside each cell and not on the others, this way you will have only the desired borders.

Remember that the global table must contain all the other tables. One table contains everything.

In your current code you have multiple tables separated to make the row structure so forcibly it won't render well.

Improve this answer

5 Comments

I tried it but I could not format it as per my requirement.
@trex what exactly is the requirement? I have done this before (not without problems) but it is definitely possible. Specially in the case of newsletters.
Just a table with that structure. That has some input fields in last column which needs to be saved in the database.
@trex I won't do it for you ;) I just gave you a lot of clues on how to do it. I am 100% certain it is possible. I have done worse before with tables.
@Joze- No Problem, Thank you very much :) JFYI - I'm trying again the same.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.