テーブルエレメントをコントロールする。
メディアデザイン論レジメページの概略「授業計画表」より
| 授 業 計 画 | |
| 第１回 皆、知らないうちにプログラミングしている | 第９回 制御文 |
| 第２回 広義のHTML5について | 第10回 オブジェクト指向（その１） |
| 第３回 HTML5の概略 | 第11回 オブジェクト指向（その2） |
| 第４回 CSS3の概略 | 第12回 API（Application Programming Interface）の利用 |
| 第５回 HTML・CSS・JavaScriptの連携について | 第13回 jQueryなどライブラリの利用 |
| 第６回 JavaScriptの概要 | 第14回 試験 |
| 第７回 記述・表記・変数・式 | 第15回 まとめ |
| 第８回 関数・イベント | |
つぎが、上のエレメントのマークアップです。
<div class=”syllabusTableWrap”> <table class=”syllabusTable” border=”0″ cellspacing=”0″ cellpadding=”0″> <thead> <tr> <td colspan=”2″ align=”center”>授 業 計 画</td> </tr> </thead> <tbody> <tr> <td>第１回 皆、知らないうちにプログラミングしている</td> <td>第９回 制御文</td> </tr> <tr> <td>第２回 広義のHTML5について</td> <td>第10回 オブジェクト指向（その１）</td> </tr> <tr> <td>第３回 HTML5の概略</td> <td>第11回 オブジェクト指向（その2）</td> </tr> <tr> <td>第４回 CSS3の概略</td> <td>第12回 API（Application Programming Interface）の利用</td> </tr> <tr> <td>第５回 HTML・CSS・JavaScriptの連携について</td> <td>第13回 jQueryなどライブラリの利用</td> </tr> <tr> <td>第６回 JavaScriptの概要</td> <td>第14回 試験</td> </tr> <tr> <td>第７回 記述・表記・変数・式</td> <td>第15回 まとめ</td> </tr> <tr> <td>第８回 関数・イベント</td> <td> </td> </tr> </tbody> </table> </div> <style> div.syllabusTableWrap{ background-color:rgba(255,255,255,0.17); } table.syllabusTable{ width:100%; margin:0px; border-top:solid #ccc 2px; border-bottom:solid #ccc 1px; border-left:solid #ccc 1px; font-size:11px; font-size:0.6875rem; } table.syllabusTable td{ padding:2px 5px 1px; } table.syllabusTable thead td{ border-bottom:double #ccc 3px; border-right:solid #ccc 1px; } table.syllabusTable tbody td{ width:50%; border-bottom:dotted #ccc 1px; border-right:solid #ccc 1px; } </style>