每日一bootstrap 表格

表格so easy的。今天覆習起來還是蠻快的一會就敲完了~~敲完就可以幹別的事了
表格只要記住原來的HTML格式，那就是加幾個class的事情，非常容易
代碼用到了上一次複習的柵格佈局。
感覺代碼也沒啥可說的，自學的話看着API也會很簡單，我這給懶人放下圖片，看看樣式的樣子

<!--table給表格添加了最基本的樣式添加了內填充，而table-striped加上了斑馬線-->

<div class="container">
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-striped">
                        <thead>學生成績</thead>
                        <tbody>
                            <tr>
                                <th>姓名</th>
                                <th>學號</th>
                                <th>課程</th>
                                <th>成績</th>
                            </tr>
                            <tr>
                                <td>小李</td>
                                <td>1</td>
                                <td>Web開發</td>
                                <td>100</td>
                            </tr>
                            <tr>
                                <td>小王</td>
                                <td>2</td>
                                <td>Web開發</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>小孫</td>
                                <td>3</td>
                                <td>Web開發</td>
                                <td>50</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>  

<!-- 添加了邊框 -->
                    <table class="table table-bordered">
                        <thead>學生成績</thead>
                        <tbody>
                            <tr>
                                <th>姓名</th>
                                <th>學號</th>
                                <th>課程</th>
                                <th>成績</th>
                            </tr>
                            <tr>
                                <td>小李</td>
                                <td>1</td>
                                <td>Web開發</td>
                                <td>100</td>
                            </tr>
                            <tr>
                                <td>小王</td>
                                <td>2</td>
                                <td>Web開發</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>小孫</td>
                                <td>3</td>
                                <td>Web開發</td>
                                <td>50</td>
                            </tr>
                        </tbody>
                    </table>

<!-- 鼠標劃過樣式 -->
                    <table class="table table-hover">
                        <thead>學生成績</thead>
                        <tbody>
                            <tr>
                                <th>姓名</th>
                                <th>學號</th>
                                <th>課程</th>
                                <th>成績</th>
                            </tr>
                            <tr>
                                <td>小李</td>
                                <td>1</td>
                                <td>Web開發</td>
                                <td>100</td>
                            </tr>
                            <tr>
                                <td>小王</td>
                                <td>2</td>
                                <td>Web開發</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>小孫</td>
                                <td>3</td>
                                <td>Web開發</td>
                                <td>50</td>
                            </tr>
                        </tbody>
                    </table>

<!-- 使表格更加緊湊一些 -->
                    <table class="table table-condensed">
                        <thead>學生成績</thead>
                        <tbody>
                            <tr>
                                <th>姓名</th>
                                <th>學號</th>
                                <th>課程</th>
                                <th>成績</th>
                            </tr>
                            <tr>
                                <td>小李</td>
                                <td>1</td>
                                <td>Web開發</td>
                                <td>100</td>
                            </tr>
                            <tr>
                                <td>小王</td>
                                <td>2</td>
                                <td>Web開發</td>
                                <td>10</td>
                            </tr>
                            <tr>
                                <td>小孫</td>
                                <td>3</td>
                                <td>Web開發</td>
                                <td>50</td>
                            </tr>
                        </tbody>
                    </table>

<!-- 添加行狀態 -->
                    <table class="table">
                        <thead>學生成績</thead>
                        <tbody>
                            <tr class="active">
                                <th>姓名</th>
                                <th>學號</th>
                                <th>課程</th>
                                <th>成績</th>
                            </tr>
                            <tr class="success">
                                <td>小李</td>
                                <td>1</td>
                                <td>Web開發</td>
                                <td>100</td>
                            </tr>
                            <tr class="warning">
                                <td>小王</td>
                                <td>2</td>
                                <td>Web開發</td>
                                <td>10</td>
                            </tr>
                            <tr class="danger">
                                <td>小孫</td>
                                <td>3</td>
                                <td>Web開發</td>
                                <td>50</td>
                            </tr>
                            <tr class="info">
                                <td>小孫</td>
                                <td>3</td>
                                <td>Web開發</td>
                                <td>50</td>
                            </tr>
                        </tbody>
                    </table>