Tables | Dsure Front-end Development Framework

Use any of the available classes of Base Stylesheets to quickly create a custom style.

(1) Style 1

Number	Name	Phone	Email
Text 1	Text 2	Text 3	Text 4
1	David Lin	123 344 4343	35745784
2	Co Cheey	231 343 3334	1490933
3	Foristin	767 929 1212	7954511

 
HTML Code:

<table class="dsure-table">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr>
            <th>Text 1</th>
            <th>Text 2</th>
            <th>Text 3</th>
            <th>Text 4</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>1</td>
            <td>David Lin</td>
            <td>123 344 4343</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Co Cheey</td>
            <td>231 343 3334</td>
            <td>1490933</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Foristin</td>
            <td>767 929 1212</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(2) Style 2

Number	Name	Phone	Email
1	David Lin	123 344 4343	35745784
2	Co Cheey	231 343 3334	1490933
3	Foristin	767 929 1212	7954511

 
HTML Code:

<table class="dsure-table dsure-table-horizontal">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>David Lin</td>
            <td>123 344 4343</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Co Cheey</td>
            <td>231 343 3334</td>
            <td>1490933</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Foristin</td>
            <td>767 929 1212</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(3) Style 3

Number	Name	Phone	Email
1	David Lin	123 344 4343	35745784
2	Co Cheey	231 343 3334	1490933
3	Foristin	767 929 1212	7954511

 
HTML Code:

<table class="dsure-table dsure-table-bordered">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>David Lin</td>
            <td>123 344 4343</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Co Cheey</td>
            <td>231 343 3334</td>
            <td>1490933</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Foristin</td>
            <td>767 929 1212</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(4) Style 4

Number	Name	Phone	Email
1	David Lin	123 344 4343	35745784
2	Co Cheey	231 343 3334	1490933
3	Foristin	767 929 1212	7954511

 
HTML Code:

<table class="dsure-table dsure-table-horizontal">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
        </tr>
    </thead>

    <tbody>
        <tr class="dsure-table-odd">
            <td>1</td>
            <td>David Lin</td>
            <td>123 344 4343</td>
            <td>35745784</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Co Cheey</td>
            <td>231 343 3334</td>
            <td>1490933</td>
        </tr>

        <tr class="dsure-table-odd">
            <td>3</td>
            <td>Foristin</td>
            <td>767 929 1212</td>
            <td>7954511</td>
        </tr>
    </tbody>
</table>

(5) Style 5

List 1	Content 1	Remark 1
List 2	Content 2	Remark 2
List 3	Content 3	Remark 3

 
HTML Code:

<table class="dsure-table dsure-table-noborder">

     <tbody>
        <tr>
            <td class="dsure-table-left-noborder">List 1</td>
            <td>Content 1</td>
            <td>Remark 1</td>
        </tr>
        
        <tr>
            <td class="dsure-table-left-noborder">List 2</td>
            <td>Content 2</td>
            <td>Remark 2</td>
        </tr>
        
        <tr>
            <td class="dsure-table-left-noborder">List 3</td>
            <td>Content 3</td>
            <td>Remark 3</td>
        </tr>
    </tbody>
        
</table>

(6) Style 6

List 1	Content 1	Remark 1
List 2	Content 2	Remark 2
List 3	Content 3	Remark 3

 
HTML Code:

<table class="dsure-table dsure-table-noborder dsure-table-horizontal">

     <tbody>
        <tr>
            <td>List 1</td>
            <td>Content 1</td>
            <td>Remark 1</td>
        </tr>
        
        <tr>
            <td>List 2</td>
            <td>Content 2</td>
            <td>Remark 2</td>
        </tr>
        
        <tr class="dsure-table-bottom-noborder">
            <td>List 3</td>
            <td>Content 3</td>
            <td>Remark 3</td>
        </tr>
    </tbody>
        
</table>

(7) Style 7

Number	Name	Phone
Center	Left	Right

Item Title 1 (center)	Item Title 2 (center)	Item Title 3 (center)
content...	content...	content...

Item Title 1 (center)	Item Title 2 (center)	Item Title 3 (center)
content1 (center)	content2 (center)	content3 (center)

 
HTML Code:

<table class="dsure-table dsure-table-bordered" style="width:100%">
    <thead>
        <tr>
            <th style="width:33.3%">Number</th>
            <th style="width:33.3%">Name</th>
            <th style="width:33.3%">Phone</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td class="dsure-table-t-center">Center</td>
            <td class="dsure-table-t-left">Left</td>
            <td class="dsure-table-t-right">Right</td>
        </tr>

    </tbody>
</table>



<table class="dsure-table dsure-table-bordered" style="width:100%">
    <thead class="dsure-table-t-center">
        <tr>
            <th style="width:33.3%">Item Title 1 (center)</th>
            <th style="width:33.3%">Item Title 2 (center)</th>
            <th style="width:33.3%">Item Title 3 (center)</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>content...</td>
            <td>content...</td>
            <td>content...</td>
        </tr>

    </tbody>
</table>


<table class="dsure-table dsure-table-bordered" style="width:100%">
    <thead>
        <tr>
            <th style="width:33.3%"  class="dsure-table-t-center">Item Title 1 (center)</th>
            <th style="width:33.3%"  class="dsure-table-t-center">Item Title 2 (center)</th>
            <th style="width:33.3%"  class="dsure-table-t-center">Item Title 3 (center)</th>
        </tr>
    </thead>

    <tbody class="dsure-table-t-center">

        <tr>
            <td>content1 (center)</td>
            <td>content2 (center)</td>
            <td>content3 (center)</td>
        </tr>

    </tbody>
</table>

(8) Style 8

Utilize the dsure-no-hover dsure-bg-black f-c-whiteordsure-no-hover dsure-bg-silver f-c-black class within the special tags like <tr>.

Number	Name	Phone
content...	content...	content...

 
HTML Code:

<table class="dsure-table dsure-table-bordered">
    <thead>
        <tr class="dsure-no-hover dsure-bg-black f-c-white">
            <th>Number</th>
            <th>Name</th>
            <th>Phone</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>content...</td>
            <td>content...</td>
            <td>content...</td>
        </tr>

    </tbody>
</table>

(9) Style 9

Number	Name	Phone	Email
3	Foristin	767 929 1212	7954511
content		content

 
HTML Code:

<table class="dsure-table dsure-table-bordered">
    <thead>
        <tr>
            <th>Number</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
        </tr>
    </thead>
    
    <tbody>

        <tr>
            <td>3</td>
            <td>Foristin</td>
            <td>767 929 1212</td>
            <td>7954511</td>
        </tr>
        
        <tr>
            <td colspan="2">content</td>
            <td colspan="2">content</td>
        </tr>
        
    </tbody>

</table>