首页 - 面向社会人士 - 交流与推广 - 模板代码 - 表格

表格

基本表格

Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here 
<table>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
         </tr>
         <tr>
             <td>Content Goes Here</td>
             <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
             <td>Content Goes Here</td>
             <td>Content Goes Here</td>
         </tr>
         <tr>
             <td>Content Goes Here</td>
             <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
             <td>Content Goes Here</td>
             <td>Content Goes Here</td>
         </tr>
    </tbody>
</table>

带标题的表格

标题一 标题二 标题三 标题四
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here 
<table>
    <thead>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

带页眉的表格

这里是页眉
标题一 标题二 标题三 标题四
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here 
<table>
    <caption>这里是页眉</caption>
    <thead>
        <tr>
            <th>标题一</th>
            <th>标题二</th>
            <th>标题三</th>
            <th>标题四</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
            <td>Content Goes Here</td>
            <td>Content Goes Here</td>
        </tr>
    </tbody>
</table>

可滑动表格

Monthly savings – Table caption
Month Savings Expenses Growth This That
Footer $4000 $2500 5% Number More Numbers
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. $400 $100 5% $100 5%
February $300 $250 4% $250 4%
March $500 $210 12% $210 12%
Midyear Subheading
July $400 $100 5% $100 5%
August $300 $250 4% $250 4% 
<div class="scrolltable">
    <table class="data large-12 columns">
        <caption>Monthly savings - Table caption</caption>
        <thead>
            <tr>
                <th>Month</th>
                <th>Savings</th>
                <th>Expenses</th>
                <th>Growth</th>
                <th>This</th>
                <th>That</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Footer</td>
                <td>$4000</td>
                <td>$2500</td>
                <td>5%</td>
                <td>Number</td>
                <td>More Numbers</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                    laoreet dolore.</td>
                <td>$400</td>
                <td>$100</td>
                <td>5%</td>
                <td>$100</td>
                <td>5%</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$300</td>
                <td>$250</td>
                <td>4%</td>
                <td>$250</td>
                <td>4%</td>
            </tr>
            <tr>
                <td>March</td>
                <td>$500</td>
                <td>$210</td>
                <td>12%</td>
                <td>$210</td>
                <td>12%</td>
            </tr>
            <tr class="subheading">
                <td colspan="6">Midyear Subheading</td>
            </tr>
            <tr>
                <td>July</td>
                <td>$400</td>
                <td>$100</td>
                <td>5%</td>
                <td>$100</td>
                <td>5%</td>
            </tr>
            <tr>
                <td>August</td>
                <td>$300</td>
                <td>$250</td>
                <td>4%</td>
                <td>$250</td>
                <td>4%</td>
            </tr>
        </tbody>
    </table>

表格的自动分页

系统会对超过 10 行的表格进行自动分页

Monthly savings – Table caption
Month Savings Expenses Growth This That
Footer $4000 $2500 5% Number More Numbers
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore. $400 $100 5% $100 5%
February $300 $250 4% $250 4%
March $500 $210 12% $210 12%
Midyear Subheading
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
July $400 $100 5% $100 5%
August $300 $250 4% $250 4%