TABLE DESIGNS

• Category: Content
• Friday, 02 September 2011 14:19
• Hits: 1231

Some table designs:

MINIMAL STYLE

The below exemple has the class set to ".minimal-style"

BOX STYLE

The below exemple has the class set to ".box-style"

ZEBRA STYLE

The below exemple has the class set to ".zebra-style"

ONE COLUMN STYLE

The below exemple has the class set to ".onecol-style"

SIMPLE STYLE

The below exemple has the class set to ".simple-style"

Code for table:

<table class="minimal-style">
    <thead>
        <tr>  
            <th scope="col">Country</th>
            <th scope="col">Population</th>
            <th scope="col">Area</th>
            <th scope="col">Official languages</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>United States of America</td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>United Kingdom</td>
            <td>61,612,300</td>
            <td>244,820 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>India</td>
            <td>1,147,995,904</td>
            <td>3,287,240 km2</td>
            <td>Hindi, English</td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>33,718,000</td>
            <td>9,984,670 km2</td>
            <td>English, French</td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>82,060,000</td>
            <td>357,021 km2</td>
            <td>German</td>
        </tr>
    </tbody>
</table>