table合併單元格colspan和rowspan


最近要實現一個成績分析的功能,最終是要呈現到Word中的,一開始想到的使用報表顯示,但是得有單獨的數據庫表來存儲這些數據,如果說項目是剛開始做的話,倒也好說,不過現在項目已經進入了後期,在新建數據庫表就有點不現實了,因此就jsp界面手畫table了。但是在畫table的過程中遇到一個問題,有些單元格是合併的,那麼怎麼來合併單元格呢?

解決方案


colspan & rowspan

colspanrowspan這兩個屬性用於創建特殊的表格。

colspan

colspan是“column span(跨列)”的縮寫。colspan屬性用在td標籤中,用來指定單元格橫向跨越的列數:

在瀏覽器中將顯示如下:

該例通過把colspan設爲“2”, 令所在單元格橫跨了二列。如果我們將colspan設爲“3”,則該單元格將跨越三列。

rowspan

rowspan的作用是指定單元格縱向跨越的行數。

瀏覽器中將顯示如下:

上例中的單元格1,其rowspan被設爲“3”,這表示該單元格必須跨越三行(本身一行,加上另外兩行)。因此,單元格1和單元格2在同一行,而單元格3和單元格4形成獨立的兩行。

綜合實例

<div class="row clearfix">
            <c:forEach items="${listFormData}" var="list">
                <div class="col-md-6 column" style="height:520px;">
                    <table class="table table-bordered" style="height:350px;border:2px solid black">    
                        <thead>
                        </thead>
                        <tbody>

                                <tr>
                                    <td class="tdOne">課程名稱</td>
                                    <td class="tdTwo" colspan="2"></td>
                                    <td class="tdOne">任課老師</td>
                                    <td class="tdTwo" colspan="2"></td>
                                </tr>

                            <tr>
                                <td class="tdOne">專業班級</td>
                                <td class="tdTwo" colspan="2"></td>
                                <td class="tdOne">考試日期</td>
                                <td class="tdTwo" colspan="2"></td>
                            </tr>
                            <tr>
                                <td class="tdOne">實考人數</td>
                                <td class="tdOne"></td>
                                <td class="tdOne">缺考人數</td>
                                <td class="tdOne"></td>
                                <td class="tdOne">學生類別</td>
                                <td class="tdOne"></td>
                            </tr>
                            <tr>
                                <td class="tdOne">命題形式</td>
                                <td class="tdOne"></td>
                                <td class="tdOne">命題負責人</td>
                                <td class="tdOne"></td>
                                <td class="tdOne">考試形式</td>
                                <td class="tdOne"></td>
                            </tr>
                            <tr>
                                <td class="tdOne">考試用卷</td>
                                <td class="tdOne"></td>
                                <td class="tdOne">考試用時</td>
                                <td class="tdOne"></td>
                                <td class="tdOne">評卷方式</td>
                                <td class="tdOne"></td>
                            </tr>

                            <tr style="height:2px;border:none;border-top:2px solid black;">
                                <td colspan="6" class="text-center">以 下 是 考 試 成 績 主 要 指 標 統 計 分 析</td>
                            </tr>

                            <tr>
                                <td class="tdOne" style="vertical-align: middle;">分數值X</td>
                                <td class="tdOne">優秀  <br/>100≥X≥90</td>
                                <td class="tdOne">良好<br/>90>X≥80</td>
                                <td class="tdOne">中等<br/>80>X≥70</td>
                                <td class="tdOne">及格<br/>70>X≥60</td>
                                <td class="tdOne">不及格<br/>60>X≥0</td>
                            </tr>
                            <tr>
                                <td class="tdOne">分佈人數</td>
                                <td class="tdOne">${list.excellentNum}</td>
                                <td class="tdOne">${list.goodNum}</td>
                                <td class="tdOne">${list.middleNum}</td>
                                <td class="tdOne">${list.passNum}</td>
                                <td class="tdOne">${list.failNum}</td>
                            </tr>
                            <tr>
                                <td class="tdOne">比例(%)</td>
                                <td class="tdOne">${list.excellentScale}</td>
                                <td class="tdOne">${list.goodScale}</td>
                                <td class="tdOne">${list.middleScale}</td>
                                <td class="tdOne">${list.passScale}</td>
                                <td class="tdOne">${list.failScale}</td>
                            </tr>



                        </tbody>
                    </table>

                    <table class="table table-bordered" style="height:143px;border:2px solid black">
                        <thead>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="tdFive">平均分數 </td>
                                <td class="tdFive">平均離差</td>
                                <td class="tdFive">標準差S</td>
                                <td class="tdFive">極差R</td>
                                <td class="tdFive">合格率r</td>
                            </tr>

                            <tr style="height:30px;">
                                <td class="tdFive">${list.avgScore}</td>
                                <td class="tdFive">${list.avgDispersion}</td>
                                <td class="tdFive">${list.standardDT}</td>
                                <td class="tdFive">${list.range}</td>
                                <td class="tdFive">${list.percentPass}</td>
                            </tr>

                            <tr >
                                <td class="tdFive">評卷單位</td>
                                <td class="tdFive">評卷負責人</td>
                                <td class="tdFive">系(部)主任</td>
                                <td class="tdFive">主管院長</td>
                                <td class="tdFive" >分析時間</td>
                            </tr>
                            <tr style="height:30px;">
                                <td class="tdFive"> </td>
                                <td class="tdFive"></td>
                                <td class="tdFive"></td>
                                <td class="tdFive"></td>
                                <td class="tdFive" ></td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </c:forEach>
            <div class="col-md-6 column" style="">
                <table class="table table-bordered" style="height:520px;border:2px solid black">
                    <thead></thead>
                    <tbody>
                        <tr>
                            <td colspan="2">試 卷 綜 合 分 析 報 告 及 改 進 措 施</td>                      
                        </tr>
                        <tr>
                            <td  class="tdFive"><br/>試卷<br/>命題<br/>質量<br/>總體<br/>評價<br/>分析<br/></td>    
                            <td class=""></td>                  
                        </tr>
                        <tr>
                            <td  class="tdFive"><br/>學生<br/>考試<br/>成績<br/>總體<br/>評價<br/>分析<br/></td>    
                            <td class=""></td>                  
                        </tr>
                        <tr>
                            <td  class="tdFive"><br/>存在<br/>問題<br/>及其<br/>改進<br/>措施<br/>方案<br/></td>    
                            <td class=""></td>                  
                        </tr>
                    </tbody>
                </table>
            </div>
            </div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章