CODEWITHSUNDEEP
htmlcsshtml-table
DairyKnight
DairyKnight

Reputation: 33

What's the best way create a pyramid-like html table?

I'm trying to create a table like this:

     A  B 
   C  D  E

In which case each line is centered and the cells are evenly distributed.

I'm currently using nested tables but feel that's not the best solution. Anyone has a better idea?

Upvotes: 1

Views: 2926

Answers (2)

Ash Burlaczenko
Ash Burlaczenko

Reputation: 25475

If you really have a use for tables use the colspan attribute on the td like below

<table>
    <tr>
         <td colspan="3">A</td>
         <td colspan="3">B</td>
    </tr>
    <tr>
         <td colspan="2">C</td>
         <td colspan="2">D</td>
         <td colspan="2">E</td>
    </tr>
</table>

Remember tables are for displaying data not for layout.

Hope this helps.

Upvotes: 1

Beno
Beno

Reputation: 4753

you could use a single table:

<style type="text/css">
    td 
    {
        text-align:center;
    }
</style>

<table>
    <tr>
        <td colspan="4">G</td>
    </tr>
    <tr>
        <td colspan="2">E</td><td colspan="2">F</td>
    </tr>
    <tr>
        <td>A</td><td>B</td><td>C</td><td>D</td>
    </tr>
</table>

Upvotes: 1

Related Questions