HTML Table with Vertical Rows

HTML Table with vertical rows

You can use <th> as the first cell in the row.
Here's a fiddle: http://jsfiddle.net/w5nWG/

---

@vishesh so you want to transpose your table after DOM ready? try this http://gist.github.com/pgaertig/2376975

$(function() {
    var t = $('#thetable tbody').eq(0);
    var r = t.find('tr');
    var cols= r.length;
    var rows= r.eq(0).find('td').length;
    var cell, next, tem, i = 0;
    var tb= $('<tbody></tbody>');

    while(i<rows){
        cell= 0;
        tem= $('<tr></tr>');
        while(cell<cols){
            next= r.eq(cell++).find('td').eq(0);
            tem.append(next);
        }
        tb.append(tem);
        ++i;
    }
    $('#thetable').append(tb);
    $('#thetable').show();
}

Most common way of writing a HTML table with vertical headers?

First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.

Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.

With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.

Vertical text on table to indicate grouped rows

You did it almost right, there were just needles cells left. But you need to adapt your CSS to handle the extra tds including the rowspan: Fiddle

HTML

.maintitle {  background: #1b1e24;  border-radius: 5px 5px 0px 0px;  height: 40px;  font-size: 20px;  color: #FFF;  font-weight: 300;  text-align: center;  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);  vertical-align: middle;}
.greenline {  color: #D5DDE5;  ;  background: green;  border-bottom: 4px solid #9ea7af;  font-size: 14px;  font-weight: 300;  text-align: center;  vertical-align: middle;}
table tr:not(:nth-child(-n+2))>td:first-child,table td[rowspan]+td {  font-weight: bold;  text-align: center;}
table td[rowspan] {  -webkit-transform: rotate(-90deg);  transform: rotate(-90deg);  width: 1%;}

<table width="100%" border="0" cellspacing="0" cellpadding="0">  <tr>    <td colspan="7" class="maintitle">title</td>  </tr>  <tr class="greenline">    <td> </td>    <td>title</td>    <td>title</td>    <td>title</td>    <td>title</td>    <td>title</td>    <td>title</td>  </tr>  <tr>    <td rowspan="5">***title***</td>    <td>text</td>    <td>text</td>    <td>text</td>    <td>text</td>    <td>text</td>    <td>text</td>  </tr>  <tr>    <td>2</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td>3</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td>4</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td>5</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td rowspan="5">***title***</td>    <td>6</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td>7</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td>8</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td>9</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr>  <tr>    <td>10</td>    <td>second</td>    <td>third</td>    <td>fourth</td>    <td>first</td>    <td>second</td>  </tr></table>

HTML Table with vertically rotated headers on the left side

I was able to solve this b treating each tag as it's own row and building the data on them individually.

    <table>
    <tr>
      <td rowspan="4" class="rotate">Header Text</td>
      <td class="rotate pole">SubHeader Text 1</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>

      <td class="rotate pole">SubHeader Text 2</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 3</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 4</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
  </table>

---

Related Topics