logo-goled

Table designs

Some table designs:

MINIMAL STYLE

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

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

BOX STYLE

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

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

ZEBRA STYLE

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

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

ONE COLUMN STYLE

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

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

SIMPLE STYLE

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

Country Population Area Official languages
United States of America 306,939,000 9,826,630 km2 English
United Kingdom 61,612,300 244,820 km2 English
India 1,147,995,904 3,287,240 km2 Hindi, English
Canada 33,718,000 9,984,670 km2 English, French
Germany 82,060,000 357,021 km2 German

 

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>

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel risus imperdiet, gravida justo eu.