Replace HTML Table with Divs

Question

Alright  I m trying to buy into the idea that html tables should not be used  and that divs should be  However  I often have code that resembles the following   lt table gt       lt tr gt           lt td gt First Name  lt  td gt           lt td colspan  2  gt  lt input  id  txtFirstName   gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt Last Name  lt  td gt           lt td colspan  2  gt  lt input  type  text  id  txtLastName   gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt Address  lt  td gt           lt td gt               lt select type  text  id  ddlState  gt                   lt option value  NY  gt NY lt  option gt                   lt option value  CA  gt CA lt  option gt               lt  select gt           lt  td gt           lt td gt               lt select type  text  id  ddlCountry  gt                   lt option value  NY  gt USA lt  option gt                   lt option value  CA  gt CAN lt  option gt               lt  select gt           lt  td gt       lt  tr gt   lt  table gt    I want the labels to be aligned and I want the controls to be aligned   How would I do this without using tables

User · Answer

Basically it boils down to using a fixed-width page and setting the width for those labels and controls. This is the most common way in which table-less layouts are implemented.

There are many ways to go about setting widths. Blueprint.css is a very popular css framework which can help you set up columns/widths.

User · Answer

This ought to do the trick    lt style gt  div block    overflow hidden    div block label    width 160px    display block    float left    text-align left    div block  input    margin-left 4px    float left     lt  style gt    lt div class  block  gt     lt label gt First field lt  label gt     lt input class  input  type  text  id  txtFirstName   gt   lt  div gt   lt div class  block  gt     lt label gt Second field lt  label gt     lt input class  input  type  text  id  txtLastName   gt   lt  div gt    I hope you get the concept

User · Answer

I looked all over for an easy solution and found this code that worked for me  The right div is a third column which I left in for readability sake   Here is the HTML    lt div class  container  gt     lt div class  row  gt       lt div class  left  gt         lt p gt PHONE  amp  FAX  lt  p gt       lt  div gt       lt div class  middle  gt         lt p gt  43 99 554 28 53 lt  p gt       lt  div gt       lt div class  right  gt   lt  div gt     lt  div gt     lt div class  row  gt       lt div class  left  gt         lt p gt Cellphone Gert  lt  p gt       lt  div gt       lt div class  middle  gt         lt p gt  43 99 302 52 32 lt  p gt       lt  div gt       lt div class  right  gt   lt  div gt     lt  div gt     lt div class  row  gt       lt div class  left  gt         lt p gt Cellphone Petra  lt  p gt       lt  div gt       lt div class  middle  gt         lt p gt  43 99 739 38 84 lt  p gt       lt  div gt       lt div class  right  gt   lt  div gt     lt  div gt   lt  div gt    And the CSS    container       display  table         row        display  table-row         left   right   middle       display  table-cell      padding-right  25px         left p   right p   middle p       margin  1px 1px

User · Answer

You can create simple float-based forms without having to lose your liquid layout  For example    lt style type  text css  gt       row   clear  left  padding  6px         row label   float  left  width  10em         row  field   display  block  margin-left  10em         row  field input   row  field select           width  100           box-sizing  border-box          -moz-box-sizing  border-box  -webkit-box-sizing  border-box  -khtml-box-sizing  border-box         lt  style gt    lt div class  row  gt       lt label for  f-firstname  gt First name lt  label gt       lt span class  field  gt  lt input name  firstname  id  f-firstname  value  Bob    gt  lt  span gt   lt  div gt   lt div class  row  gt       lt label for  f-state  gt State lt  label gt       lt span class  field  gt  lt select name  state  id  f-state  gt           lt option value  NY  gt NY lt  option gt       lt  select gt  lt  span gt   lt  div gt    This does tend to break down  though  when you have complex form layouts where there s a grid of multiple fixed and flexible width columns  At that point you have to decide whether to stick with divs and abandon liquid layout in favour of just dropping everything into fixed pixel positions  or let tables do it   For me personally  liquid layout is a more important usability feature than the exact elements used to lay out the form  so I usually go for tables

User · Answer

Please be aware that although tables are discouraged as a primary means of page layout  they still have their place  Tables can and should be used when and where appropriate and until some of the more popular browsers  ahem  IE  ahem  become more standards compliant  tables are sometimes the best route to a solution

User · Answer

there is a very useful online tool for this  just automatically transform the table into divs   http   www html-cleaner com features replace-html-table-tags-with-divs   And the video that explains it  https   www youtube com watch v R1ArAee6wEQ  I m using this on a daily basis  I hope it helps

[html] Replace HTML Table with Divs

Examples related to html

Examples related to css

Examples related to html-table