How Would You Do This: Tables or CSS

How (and why) to use display: table-cell (CSS)

After days trying to find the answer, I finally found

display: table;

There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the "How":

To use this fantastic piece of code, you need to think back to when tables were the only real way to structure HTML, namely the syntax. To get a table with 2 rows and 3 columns, you'd have to do the following:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Similarly to get CSS to do it, you'd use the following:

HTML

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

CSS

#table{ 
    display: table; 
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell; }

As you can see in the example below, the divs in the 3rd column have no content, yet are respecting the auto height set by the text in the first 2 columns. WIN!

#table {
    display: table;
    padding: 5px;
}
.tr {
    display: table-row;
    padding: 5px;
}
.td {
    display: table-cell;
    padding: 5px;
    width: 150px;
    border: #000000 solid 1px;
    margin: 5px;
}

<div id="table">
    <div class="tr">
        <div class="td">Row 1,
            <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
        <div class="td">Row 2,
            <br />Column 1</div>
        <div class="td">Row 2, Column 2</div>
        <div class="td" style="background:#888888;"></div>
    </div>
</div>

How can I do this in CSS without using a table?

I've only tested in FF6 and Chrome, but here's one way to do it.

http://jsfiddle.net/e7T3g/3/

Note that the first one is your image. Yes, this is not 100% perfect and will need to be tested and tweaked, but just wanted to show you that creating this layout with CSS is not a dream.

(One reason) Why this is better than using tables:

If you look at the markup, there's nothing that suggests layout at all, everything is semantic and uses classes. If one day you want to completely change how the layout looks, it's all in your CSS file. Using tables, you'll have to wade through tons of tedious <tr>s and <td>s in your HTML file and your CSS file to make a change. Likewise, if you want to make one small change, you aren't restricted by the table markup, which is very hard to work with.

The quick 'n dirty:

<form>
    <div class="address">
        <label>Address</label><input>
    </div>
    <div class="city">
        <label>City</label><input>
    </div>
    <div class="state">
        <label>State</label>
        <select>
            <option></option>
            <option>___</option>
            <option>___</option>
        </select>
    </div>
    <div class="zip">
        <label>Zip</label>
        <input>
    </div>
    <div class="archive">
        <label>Archive Location</label>
        <input type="checkbox">
    </div>
</form>

input {
    padding:3px;   
}
label:after {
    content:":";   
}
form {
    background:#888;
    padding:15px 25px 10px 15px;
    width:470px;
    float:left;
    font:900 13px serif;
}
.archive,
.address {
    float:left;
    width:100%;  
    margin-bottom:3px;
}

.archive label,
.city label,
.address label {
    width:100px;
    text-align:right;
    float:left;
}
.address input {
    width:360px;
}
.zip input {
    width:70px;   
}
.address,
.zip {
    float:right;   
}
.city,
.state {
    float:left;  
    margin-right:8px;
}
.archive {
    margin-top:5px;   
}

There's a million ways to do this layout, (and it's not a complete HTML fragment yet, we're missing some required attributes) and I'm sure I could come up with an better version, but I'll leave that as an exercise to you as you continue to learn CSS.

How to have different table styles in CSS

declare classes for each type of styling you want to create, and assign to the <table> in the html via the class attribute

css

.table1 {
    ...
}

.table2 {
    ...
}

html

<table class="table1">
    ...
</table>

<table class="table2">
    ...
</table>

HTML: how to make 2 tables with different CSS

In your html

<table class="table1">
<tr>
<td>
...
</table>

<table class="table2">

<tr>
<td>
...
</table>

In your css:

table.table1 {...}
table.table1 tr {...}
table.table1 td {...}

table.table2 {...}
table.table2 tr {...}
table.table2 td {...}

Can you do this HTML layout without using tables?

There is nothing wrong with using the tools that are available to you to do the job quickly and correctly.

In this case a table worked perfectly.

I personally would have used a table for this.

I think nested tables should be avoided, things can get messy.

Should Tables be avoided in HTML at any cost?

No - not at all. But use tables for tabular data. Just don't use them for general layouting.

But if you display tabular data, like results or maybe even a form, go ahead and use tables!

How do I create an HTML table with a fixed/frozen left column and a scrollable body?

If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...

Relevant HTML & CSS:

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td,
th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
  letter-spacing: 1em;
}

<div>
  <table>
    <tr>
      <th class="headcol">1</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">3</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">5</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">6</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
  </table>
</div>

---

Related Topics