Table designs

Some table designs:

MINIMAL STYLE

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

Country Population Area Languages
United States of America 306 9,630 km2 English
United Kingdom 61,300 244,820 km2 English
India 1,904 3,240 km2 Hindi, English
Canada 33,000 9,670 km2 English, French
Germany 82,000 357 km2 German

BOX STYLE

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

Country Population Area Languages
United States of America 306,000 9,630 km2 English
United Kingdom 61,300 244 km2 English
India 1,904 3,240 km2 Hindi, English
Canada 33,000 9,670 km2 English, French
Germany 82,000 357 km2 German

ZEBRA STYLE

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

Country Population Area Languages
United States of America 306,939,000 9,630 km2 English
United Kingdom 61,300 244 km2 English
India 1,904 3,240 km2 Hindi, English
Canada 33,000 9,670 km2 English, French
Germany 82,000 357 km2 German

ONE COLUMN STYLE

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

Country Population Area Languages
United States of America 306,000 9,630 km2 English
United Kingdom 61,300 244 km2 English
India 1,904 3 km2 Hindi, English
Canada 33,000 9,670 km2 English, French
Germany 82,000 357 km2 German

SIMPLE STYLE

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

Country Population Area Languages
United States of America 306,000 9,630 km2 English
United Kingdom 61,300 244 km2 English
India 1,904 3 km2 Hindi, English
Canada 33,000 9,670 km2 English, French
Germany 82,000 357 km2 German

 

Code for table:

<table class="responsive minimal-style">
    <thead>
        <tr>  
            <th scope="col">Country</th>
            <th scope="col">Population</th>
            <th scope="col">Area</th>
            <th scope="col">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>
  • Tweets