2

I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?

Here is the code of the table

<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

As you can see I want a table using divs with 

width="100%" border="0" align="left" cellpadding="0" cellspacing="0"

What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?

NICALANICA
  • 35
  • 5
  • Just curious as to why you would like to have it that way? For answer, you could use the css property 'display: table' – Sagar Jul 22 '17 at 16:19
  • here a table of 4 cells on top of each others can be turned into any 4 block level tags. tbody is part of the regular table structure, thead and tfooter then can be used. If not in the HTML code, browser will still emulate it. – G-Cyrillus Jul 22 '17 at 16:20
  • My idea is to convert my old tablet design to div design – NICALANICA Jul 22 '17 at 16:27
  • Please stop using DreamWeaver :( – Catalyst Jul 22 '17 at 20:12
  • @Sagar - I will answer that: When you wish your tables to be responsive and render in a different manner on mobile devices (narrow viewpoert), simulating a table using CSS instead of actual *table* tags allows a degree of freedom you otherwise won't have. – vsync Feb 17 '19 at 14:51
  • Related - https://stackoverflow.com/q/29229523/104380 – vsync Feb 17 '19 at 15:02

1 Answers1

3

HTML

<div class="table">
  <div class="tr">
    <div class="td"></div>
    <div class="td"></div>
  </div>
  <div class="tr">
    <div class="td"></div>
    <div class="td"></div>
  </div>
</div>

CSS

.table {
  width: 100%;
  display: table;
  border-collapse: collapse;
}
.table .tr {
  display: table-row;
}
.table .td {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

Hope this works for you. :)

J. Langer
  • 262
  • 3
  • 17