最近要實現一個成績分析的功能,最終是要呈現到Word中的,一開始想到的使用報表顯示,但是得有單獨的數據庫表來存儲這些數據,如果說項目是剛開始做的話,倒也好說,不過現在項目已經進入了後期,在新建數據庫表就有點不現實了,因此就jsp界面手畫table了。但是在畫table的過程中遇到一個問題,有些單元格是合併的,那麼怎麼來合併單元格呢?
解決方案
colspan & rowspan
colspan
和rowspan
這兩個屬性用於創建特殊的表格。
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>