CODEWITHSUNDEEP
htmlcss
Varun Verma
Varun Verma

Reputation: 724

DIV as Table - Showing multiple tables on a page. Stacked below and left-right

I need to create a few tables to hold data. This is how the structure looks the diagram below. Table 1 and Table 2 will be in the first row and there must be a gap in between the tables. Table 3,4,5 will be in the next row and again, there should be some gap in between the tables.

 --------------          -------------------
|               |       |                   |
|               |       |                   |
|               |       |                   |
|               |       |                   |
|   Table 1     |       |       Table 2     |
|               |       |                   |
|               |       |                   |
|               |       |                   |
|               |       |                   |
|               |       |                   |
|               |       |                   |
 ---------------         -------------------

 ---------------         ---------------         ---------------
|               |       |               |       |               |
|               |       |               |       |               |
|               |       |               |       |               |
|               |       |               |       |               |
|               |       |               |       |               |
|   Table 3     |       |   Table 4     |       |   Table 5     |
|               |       |               |       |               |
|               |       |               |       |               |
|               |       |               |       |               |
|               |       |               |       |               |
|               |       |               |       |               |
|               |       |               |       |               |
 ---------------         ---------------         ---------------

This is what I have attempted to do so far, but it isn't perfect. Any help would be appreciated. https://jsfiddle.net/Leyzejfs/

Upvotes: 0

Views: 139

Answers (1)

Johannes
Johannes

Reputation: 67778

This is a bit of a strange question (because it's not clear what it is exactly what you want), but nevertheless: Just add some margin to the CSS rule for .table

https://jsfiddle.net/1qyyeja5/1/

(you only have four tables in your jsfiddle as opposed to the five your were drawing in your question, but the principle is the same)

However, if your tables should be arranged in some kind of grid, you can place them into another "wrapper table" to have them aligned both ways - horizontally and vertically , like in - yes: a table...

Upvotes: 1

Related Questions