How to draw an html table with diagonal lines and diagonal text?

The main building blocks are:

• A nicely marked up <table>
• A pseudo element border with skew to get the basic shape
• A rotate on the span that contains the header text.

The concept is pretty basic, the pseudo elements and spans are positioned using position: absolute and they are positioned relative to their parent <th> headers which have position: relative
Here is the example!
Here is what it looks like in Chrome / Firefox / IE10+. IE 8 - 9 should work with their proprietary filters.

Here is the HTML / CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background: #FFF;
}
table {
    border-collapse: collapse;
    margin: 50px 0 0 50px;
    border-top: solid 1px #000;
    position: relative;
}

/* Very top border */
 table:before {
    content:'';
    display: block;
    position: absolute;
    top: -20px;
    left: 120px;
    height: 20px;
    width: 240px;
    border: solid 1px #000;
    border-bottom: none;
}

/* Far right headers top border (it's outside the table) */
 table:after {
    content:'';
    display: block;
    position: absolute;
    border-top: solid 1px #000;
    width: 101px;
    right: -101px;
    top: 0;
}

/* 
     - Apply header background/font colour 
     - Set base z-index for IE 9 - 10
*/
 thead, th:before {
    background: #03a9f4;
    color: #FFF;
    z-index: 1;
}

/* min-width and max-width together act like a width */
 th {
    min-width: 60px;
    max-width: 60px;
    position: relative;
    height: 100px;
}

/* Pseudo element borders */
 th:before {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    height: 100px;
    width: 60px;
    border: solid 1px #000;
    border-right: none;
    border-top: none;
    transform: skew(-45deg);
    border-bottom: none;
}

/* Apply the right border only to the last pseudo element */
 thead th:last-child:before {
    border-right: solid 1px #000;
}

/* Apply the top border only to the first rows cells */
 tbody tr:first-child td {
    border-top: solid 1px #000;
}

/* 
     - Rotate and position headings
     - Padding centers the text vertically and does the job of height
     - z-index ensures that the text appears over the background color in IE 9 - 10
*/
 th span {
    transform: rotate(-45deg);
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: -70px;
    bottom: 29px;
    height: 0;
    padding: 0.75em 0 1.85em;
    width: 100px;
    z-index: 2;
}

/* Create first two th styles */
 th:nth-child(1), th:nth-child(2) {
    border: solid 1px #000;
    border-top: none;
    border-bottom: none;
}
th:nth-child(2) {
    border-right: none;
}
th:nth-child(1):before, th:nth-child(2):before {
    display: none;
}

td {
    border: solid 1px #000;
    border-bottom: none;
    border-top: none;
    height: 20px;
    text-align: center;
}
tfoot {
    border: solid 1px #000;
}

HTML Code :  

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th><span>Three</span></th>
            <th><span>Four</span></th>
            <th><span>Five</span></th>
            <th><span>Six</span></th>
            <th><span>Seven</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tfoot>
</table>