Top

Tables

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>