Styling (X)HTML table Elements

examples of how to style (X)HTML table elements in response to http://stackoverflow.com/questions/7373177/can-html-table-cells-be-rearranged-with-css

by J. Albert Bowden

HTML

<table class="table01">
    <thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead>
    <tbody>
        <tr><td colspan="2">A</td><td>B</td><td>C</td></tr>
    </tbody>
</table>
<div class="box">
    <table class="table02">
        <thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead>
        <tbody>
            <tr><td class="table02a" colspan="2">A</td><td class="table02b">B</td><td class="table02c">C</td></tr>
        </tbody>
    </table>
</div>
<div class="box">
    <table class="table03">
        <thead><tr><th>1</th><th>2</th></tr></thead>
        <tbody>
            <tr><td class="table03a" scope="row" colspan="2">A</td></tr>
            <tr><td class="table03b">B</td><td class="table03c">C</td></tr>
        </tbody>
    </table>
</div>

CSS

table{width:400px}
td,th{text-align:center; outline:1px solid #000}
.box{position:relative; margin-top:30px; width:400px}
.table02{}
.table02 td{position:absolute; top:20px}
.table02a{left:100px; width:50%}
.table02b{left:0; width:25%}
.table02c{right:0; width:25%}