第4章 リスト・テーブル
リストとテーブルの作成
homepage
# **リスト・テーブル** *** ### **1．HTML リスト** HTMLで箇条書きの際にul・ol・liタグを使います。 + ulは黒ポチの箇条書き + olは番号付きの箇条書き ### **1-1．ul** #### **例** [sample4-1.html] ``` <body> <ul> <li>リンゴ</li> <li>バナナ</li> <li>パイナポー</li> </ul> </body> ``` #### **実行結果** <!DOCTYPE html><html><head><title>Page Title</title><head><body><ul> <li>リンゴ</li><li>バナナ</li><li>パイナポー</li></ul><br></body></html> ### **1-2．ol** #### **例** [sample4-2.html] ``` <body> <ol> <li>リンゴ</li> <li>バナナ</li> <li>パイナポー</li> </ol> </body> <style> ol { /*枠線の太さは2px 水色 破線*/ border: 2px skyblue dashed; /*背景色設定*/ background: #f3fbff; } ol li{ /*li要素の内容を水色に*/ color:#43acff; } </style> ``` #### **実行結果** <!DOCTYPE html><html><head><title>Page Title</title></head><body><ol style="border: 2px skyblue dashed;background: #f3fbff;color:#43acff;"> <li>リンゴ</li><li>バナナ</li><li>パイナポー</li></ol><br></body></html> ### **２．HTML テーブル** HTMLテーブルは```<table>```タグを使用します。行は```<tr>```で、行内のセルは```<td>```で、列のヘッダは```<th>```で定義します。```<th>```は入れなくても構いません。 #### **例** [sample4-3.html] ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <table border="1" cellspacing="0"> <tr><th>果物</th><th>野菜</th><th>肉</th></tr> <tr><td>バナナ</td><td>キュウリ</td><td>鶏肉</td></tr> <tr><td>オレンジ</td><td>レタス</td><td>豚肉</td></tr> <tr><td>リンゴ</td><td>ナス</td><td>魚</td></tr> </table> </body> </html> ``` #### **実行結果** <!DOCTYPE html><html><head><meta charset="utf-8"></head><body><table border="1" cellspacing="0"> <tr><th>果物</th><th>野菜</th><th>肉</th></tr> <tr><td>バナナ</td><td>キュウリ</td><td>鶏肉</td></tr> <tr><td>オレンジ</td><td>レタス</td><td>豚肉</td></tr> <tr><td>リンゴ</td><td>ナス</td><td>魚</td></tr> </table><br></body></html> *** >**練習** >> **問題**[ex4-1.html] <br> 下記テーブルを作成しましょう。 <table id="table3"> <tr> <td>りんご</td> <td>甘酸っぱい</td> <td>おおむね赤</td> </tr> <tr> <td>なつみかん</td> <td>かなり酸っぱいと思う</td> <td>たいてい黄色</td> </tr> </table> <style> #table3 td{ border: 2px red solid; text-align:center } </style>
content
戻る
