How create table only using div tag and Css

Question

I want to create table only using  lt div gt  tag and CSS   This is my sample table    lt body gt     lt form id  form1  gt         lt div class  divTable  gt                lt div class  headRow  gt                   lt div class  divCell  align  center  gt Customer ID lt  div gt                   lt div  class  divCell  gt Customer Name lt  div gt                   lt div  class  divCell  gt Customer Address lt  div gt                lt  div gt               lt div class  divRow  gt                     lt div class  divCell  gt 001 lt  div gt                   lt div class  divCell  gt 002 lt  div gt                   lt div class  divCell  gt 003 lt  div gt               lt  div gt               lt div class  divRow  gt                   lt div class  divCell  gt xxx lt  div gt                   lt div class  divCell  gt yyy lt  div gt                   lt div class  divCell  gt www lt  div gt              lt  div gt               lt div class  divRow  gt                   lt div class  divCell  gt ttt lt  div gt                   lt div class  divCell  gt uuu lt  div gt                   lt div class  divCell  gt Mkkk lt  div gt              lt  div gt          lt  div gt     lt  form gt   lt  body gt    And Style    lt style type  text css  gt       divTable               display   table          width auto          background-color  eee          border 1px solid   666666          border-spacing 5px   cellspacing poor IE support for  this             border-collapse separate                divRow              display table-row         width auto              divCell               float left   fix for  buggy browsers           display table-column          width 200px          background-color  ccc         lt  style gt    But this table not work with IE7 and below version Please give your solution and ideas for me  Thanks

User · Answer

In building a custom set of layout tags  I found another answer to this problem   Provided here is the custom set of tags and their CSS classes   HTML   lt layout-table gt      lt layout-header gt           lt layout-column gt  1 a lt  layout-column gt          lt layout-column gt    lt  layout-column gt          lt layout-column gt  3  lt  layout-column gt          lt layout-column gt  4  lt  layout-column gt      lt  layout-header gt       lt layout-row gt           lt layout-column gt  a  lt  layout-column gt          lt layout-column gt  a 1 lt  layout-column gt          lt layout-column gt  a  lt  layout-column gt          lt layout-column gt  a  lt  layout-column gt      lt  layout-row gt       lt layout-footer gt           lt layout-column gt  1  lt  layout-column gt          lt layout-column gt    lt  layout-column gt          lt layout-column gt  3 b lt  layout-column gt          lt layout-column gt  4  lt  layout-column gt      lt  layout-footer gt   lt  layout-table gt    CSS  layout-table       display   table      clear   both      table-layout   fixed      width   100      layout-table unresolved       color   red      border  1px blue solid      empty-cells   show     layout-header  layout-footer  layout-row        display   table-row      clear   both         empty-cells   show      width   100      layout-column         display   table-column      float   left      width   25       min-width   25       empty-cells   show      box-sizing  border-box         border  1px solid white         padding   1px 1px 1px 1px     layout-row nth-child even         background-color   lightblue     layout-row hover    background-color   f5f5f5     The key to getting empty cells and cells in general to be the right size  is Box-Sizing and Padding   Border will do the same thing as well  but creates a line in the row   Padding doesn t  And  while I haven t tried it  I think Margin will act the same way as Padding  in forcing and empty cell to be rendered properly

User · Answer

I don t see any answer considering Grid-Css  I think it is a very elegant approach  grid-css even supports row span and and column spans  Here you can find a very good article   https   medium com  js tut css-grid-tutorial-filling-in-the-gaps-c596c9534611

User · Answer

divs shouldn t be used for tabular data  That is just as wrong as using tables for layout  Use a  lt table gt   Its easy  semantically correct  and you ll be done in 5 minutes

User · Answer

Use the correct doc type  it will solve the problem  Add the below line to the top of your HTML file    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt

User · Answer

div-table     display  table             width  auto             background-color   eee             border  1px solid  666666             border-spacing  5px     cellspacing poor IE support for  this       div-table-row     display  table-row    width  auto    clear  both     div-table-col     float  left     fix for  buggy browsers      display  table-column             width  200px             background-color   ccc        Runnable snippet    x000D   x000D   div-table   x000D    display  table           x000D    width  auto           x000D    background-color   eee           x000D    border  1px solid  666666           x000D    border-spacing  5px     cellspacing poor IE support for  this    x000D    x000D   div-table-row   x000D    display  table-row  x000D    width  auto  x000D    clear  both  x000D    x000D   div-table-col   x000D    float  left     fix for  buggy browsers    x000D    display  table-column           x000D    width  200px           x000D    background-color   ccc    x000D    x000D   lt body gt  x000D     lt form id  form1  gt  x000D         lt div class  div-table  gt  x000D                lt div class  div-table-row  gt  x000D                   lt div class  div-table-col  align  center  gt Customer ID lt  div gt  x000D                   lt div  class  div-table-col  gt Customer Name lt  div gt  x000D                   lt div  class  div-table-col  gt Customer Address lt  div gt  x000D                lt  div gt  x000D               lt div class  div-table-row  gt  x000D                     lt div class  div-table-col  gt 001 lt  div gt  x000D                   lt div class  div-table-col  gt 002 lt  div gt  x000D                   lt div class  div-table-col  gt 003 lt  div gt  x000D               lt  div gt  x000D               lt div class  div-table-row  gt  x000D                   lt div class  div-table-col  gt xxx lt  div gt  x000D                   lt div class  div-table-col  gt yyy lt  div gt  x000D                   lt div class  div-table-col  gt www lt  div gt  x000D              lt  div gt  x000D               lt div class  div-table-row  gt  x000D                   lt div class  div-table-col  gt ttt lt  div gt  x000D                   lt div class  div-table-col  gt uuu lt  div gt  x000D                   lt div class  div-table-col  gt Mkkk lt  div gt  x000D              lt  div gt  x000D   x000D         lt  div gt  x000D     lt  form gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

This is an old thread  but I thought I should post my solution  I faced the same problem recently and the way I solved it is by following a three-step approach as outlined below which is very simple without any complex CSS     NOTE   Of course  for modern browsers  using the values of table or table-row or table-cell for display CSS attribute would solve the problem  But the approach I used will work equally well in modern and older browsers since it does not use these values for display CSS attribute    3-STEP SIMPLE APPROACH  For table with divs only so you get cells and rows just like in a table element use the following approach    Replace table element with a block div  use a   table class  Replace each tr or th element with a block div  use a  row class  Replace each td element with an inline block div  use a  cell class     x000D   x000D   table  display block    x000D   row   display block   x000D   cell  display inline-block   x000D       lt h2 gt Table below using table element lt  h2 gt  x000D       lt table cellspacing  0   gt  x000D          lt tr gt  x000D             lt td gt Mike lt  td gt  x000D             lt td gt 36 years lt  td gt  x000D             lt td gt Architect lt  td gt  x000D          lt  tr gt  x000D          lt tr gt  x000D             lt td gt Sunil lt  td gt  x000D             lt td gt 45 years lt  td gt  x000D             lt td gt Vice President aas lt  td gt  x000D          lt  tr gt  x000D          lt tr gt  x000D             lt td gt Jason lt  td gt  x000D             lt td gt 27 years lt  td gt  x000D             lt td gt Junior Developer lt  td gt  x000D          lt  tr gt  x000D       lt  table gt  x000D       lt h2 gt Table below is using Divs only lt  h2 gt  x000D       lt div class  table  gt  x000D          lt div class  row  gt  x000D             lt div class  cell  gt  x000D               Mike x000D             lt  div gt  x000D             lt div class  cell  gt  x000D               36 years x000D             lt  div gt  x000D             lt div class  cell  gt  x000D               Architect x000D             lt  div gt  x000D          lt  div gt  x000D          lt div class  row  gt  x000D             lt div class  cell  gt  x000D               Sunil x000D             lt  div gt  x000D             lt div class  cell  gt  x000D               45 years x000D             lt  div gt  x000D             lt div class  cell  gt  x000D               Vice President x000D             lt  div gt  x000D          lt  div gt  x000D          lt div class  row  gt  x000D             lt div class  cell  gt  x000D               Jason x000D             lt  div gt  x000D             lt div class  cell  gt  x000D               27 years x000D             lt  div gt  x000D             lt div class  cell  gt  x000D               Junior Developer x000D             lt  div gt  x000D          lt  div gt  x000D       lt  div gt  x000D   x000D   x000D    UPDATE 1  To get around the effect of same width not being maintained across all cells of a column as mentioned by thatslch in a comment  one could adopt either of the two approaches below    Specify a width for cell class  cell  display inline-block  width 340px   Use CSS of modern browsers as below     table  display table     row   display table-row    cell  display table-cell

User · Answer

If there is anything in  lt table gt  you don t like  maybe you could use reset file   or   if you need this for layout of the page check out the cssplay layout examples for designing websites without tables

User · Answer

A bit OFF-TOPIC  but may help someone for a cleaner HTML    CSS   common table      display table      border-collapse collapse      border 1px solid grey         common table DIV      display table-row      border 1px solid grey         common table DIV DIV      display table-cell          HTML   lt DIV class  common table  gt      lt DIV gt  lt DIV gt this is a cell lt  DIV gt  lt  DIV gt      lt DIV gt  lt DIV gt this is a cell lt  DIV gt  lt  DIV gt   lt  DIV gt    Works on Chrome and Firefox

[html] How create table only using <div> tag and Css

Examples related to html

Examples related to css