Create a table with sub-headings and side-headings

https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/

<body>
<table class="table-bordered">
    <col>
    <col>
    <col>
    <colgroup span="4"></colgroup>
    <col>
    <tr>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">S.No.</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Item</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Description</th>
        <th colspan="3" style="horizontal-align : middle;text-align:center; width: 50%;">Items</th>
        <th rowspan="2" style="vertical-align : middle;text-align:center;">Rejected Reason</th>
    </tr>
    <tr>
        <th scope="col">Order</th>
        <th scope="col">Received</th>
        <th scope="col">Accepted</th>
    </tr>
    <tr>
        <th>1</th>
        <td>Watch</td>
        <td>Analog</td>
        <td>100</td>
        <td>75</td>
        <td>25</td>
        <td>Not Functioning</td>
    </tr>
    <tr>
        <th>2</th>
        <td>Pendrive</td>
        <td>5GB</td>
        <td>250</td>
        <td>165</td>
        <td>85</td>
        <td>Not Working</td>
    </tr>
</table>

already answered but markup should be more like this :

<table>
    <thead>
        <tr>
            <th colspan="2">Object</th>
            <th colspan="2">Openings</th>
            <th colspan="3">Internal Dimensions</th>
            <th colspan="3">Weight</th>
            <th>Volume</th>
        </tr>
        <tr>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
            <th>sub header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>row header</th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

with some style it render : http://fiddle.jshell.net/TLAV8/ http://jsfiddle.net/TLAV8/


Something like this

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <style type="text/css">
        table {
            width: 100%;
            border: 1px solid black;
        }

            table td, table th {
                border: 1px solid black;
            }

            table .FirstColumn {
                background-color: #9999dd;
            }

            table thead tr {
                background-color: blue;
            }

            table tbody.secondHeader tr {
                background-color: skyblue;
            }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <colgroup>
            <col class="FirstColumn">
        </colgroup>
        <thead>
            <tr>
                <th colspan="2">Object</th>
                <th colspan="2">Openings</th>
                <th colspan="3">Internal Dimensions</th>
                <th colspan="3">Weight</th>
                <th>Volume</th>
            </tr>
        </thead>
        <tbody class="secondHeader">
            <tr>
                <th>Type</th>
                <th>Size</th>
                <th>Width</th>
                <th>Height</th>
                <th>Length</th>
                <th>Width</th>
                <th>Height</th>
                <th>Max</th>
                <th>Min</th>
                <th>Tare</th>
                <th>Capacity</th>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>20 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>40 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>50 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>60 std</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

I would suggest having a look at HTML tables and all the variations a bit more in depth, a good place to start would be here, including but not limited to concepts like colgroup, col and colspan

Tags:

Html

Css

Recent Posts