Mike Ross Mike Ross - 1 month ago 9
CSS Question

Nested tables using CSS

I know it is very simple question but I am not designer and so I am having problems achieve this.

I have attached the screenshot here of what i expect to make using

<table>
tags.

enter image description here

I am hoping someone can help me with that.

Thank you

Answer

Use Html for nested tables and Css for styling the tables and cell borders. Something like this:

<table class="table demo-table">
<tbody>
  <tr>
    <td colspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <table class="table demo-table2">
        <tbody>
          <tr>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </td>
    <td></td>
    <td colspan="2"></td>
  </tr>
</tbody>
</table>

And Css:

.demo-table {
  border: 1px solid black;
  display:table;
}

.demo-table td {
  height:50px;
  width:50px;
}

.table td {
  border: 1px solid black;
}

Look at the rendered table here