SearchMenu

Demo post — tables

This is the sixth post with tests and demo for table elements with code snippets and explanations

Let`s go!

Tables


    <table class="table table_left">
        <caption>Left-floated table</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
Left-floated table
Left-floated table
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Donec vitae semper ante, et placerat est. Vivamus adipiscing pulvinar purus. Suspendisse imperdiet nibh ac purus placerat sodales. Praesent vel molestie libero. Quisque gravida et leo ut placerat. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.


    <table class="table table_right">
        <caption>Right-floated table</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
Right-floated table
Right-floated table
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu augue sem. Sed eros tortor, rhoncus eget tortor at, adipiscing faucibus libero. Nullam eget neque sit amet eros sagittis venenatis. Nulla cursus metus in mattis consectetur. Cras nibh est, vestibulum vel imperdiet in, porttitor vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed pharetra tellus. Morbi et tellus iaculis, viverra nibh non, placerat diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce semper elementum mattis. Suspendisse vitae porta turpis.


    <table class="table table_center">
        <caption>Centered full-width table</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
Centered full-width table
Centered full-width table
Entry Header 1Entry Header 2Entry Header 3Entry Header 4Entry Header 5
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4Entry First Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4Entry Last Line 5

Praesent ante est, sollicitudin eu velit at, eleifend interdum ipsum. Duis et blandit metus. Fusce sed pellentesque turpis, eu faucibus mi. Nullam tempor nibh sit amet semper posuere. Cras in dignissim mi. Suspendisse id massa ac nisl posuere congue et in velit.


    <table class="table table_left table_left-extra">
        <caption>Left floated table with extra margin</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
Left floated table with extra margin
Left floated table with extra margin
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Donec vitae semper ante, et placerat est. Vivamus adipiscing pulvinar purus. Suspendisse imperdiet nibh ac purus placerat sodales. Praesent vel molestie libero. Quisque gravida et leo ut placerat. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis. Fusce vel magna commodo, sodales risus at, eleifend nibh. Nulla tristique metus eu ante elementum, sit amet tempor purus molestie. In luctus feugiat lacus sed lobortis.


    <table class="table table_right table_right-extra">
        <caption>Right floated table with extra margin</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
Right floated table with extra margin
Right floated table with extra margin
Entry Header 1Entry Header 2Entry Header 3Entry Header 4
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4
Entry Line 1Entry Line 2Entry Line 3Entry Line 4
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4

Phasellus euismod neque at odio congue bibendum. Nam neque lectus, hendrerit nec ligula nec, feugiat tincidunt dolor. Maecenas id sem orci. Ut non velit est. Nullam et lectus in arcu rhoncus rutrum vitae vitae augue. Donec sodales risus auctor velit vulputate, vel elementum velit viverra. Nulla mattis scelerisque tellus eget malesuada. Donec tempus vulputate felis, id dictum odio euismod sit amet.

Curabitur adipiscing leo eu ipsum rhoncus, quis imperdiet elit pretium. Praesent viverra nunc et justo commodo tincidunt. Mauris leo augue, fringilla vitae tempor in, facilisis in sapien. Integer dui sapien, placerat at orci sit amet, laoreet vestibulum nunc. Vestibulum nec placerat felis. Etiam blandit massa ac ligula aliquet pretium. Suspendisse potenti. Aliquam erat volutpat. Quisque id auctor felis. Proin sollicitudin euismod aliquam.


    <table class="table table_center table_center-extra">
        <caption>Centered full-width table with extra margin</caption>
        <tr>
            <th>Entry Header 1</th>
            <th>Entry Header 2</th>
            <th>Entry Header 3</th>
            <th>Entry Header 4</th>
        </tr>
        <tr>
            <td>Entry First Line 1</td>
            <td>Entry First Line 2</td>
            <td>Entry First Line 3</td>
            <td>Entry First Line 4</td>
        </tr>
    </table>
Centered full-width table with extra margin
Centered full-width table with extra margin
Entry Header 1Entry Header 2Entry Header 3Entry Header 4Entry Header 5
Entry First Line 1Entry First Line 2Entry First Line 3Entry First Line 4Entry First Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Line 1Entry Line 2Entry Line 3Entry Line 4Entry Line 5
Entry Last Line 1Entry Last Line 2Entry Last Line 3Entry Last Line 4Entry Last Line 5

Author: Maxim Orlov, published: 

Tags:  Lorem ipsum, test, demo, page elements, tables

Category:  technologies

Share this post

If you like this post why don`t you share it with your friends?