テーブルの基本
[作成] table1.html、table1.css
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table1.css"> <title>テーブルの基本</title> </head> <body> <table border="1"> <tr> <td>左上</td> <td>右上</td> </tr> <tr> <td>左下</td> <td>右下</td> </tr> </table> </body> </html>
table1.css
@charset "UTF-8"; table { border: 1px solid gray; } td { border: 1px solid gray; }
テーブルの枠線の幅を変更
[修正] table1.css
[フォルダ] webpage/ch07
@charset "UTF-8"; table { border: 10px solid gray; } td { border: 1px solid gray; }
セルの区切り線の幅を変更
[修正] table1.css
[フォルダ] webpage/ch07
@charset "UTF-8"; table { border: 10px solid gray; border-spacing: 10px; } td { border: 1px solid gray; }
セルの内側の余白を変更
[修正] table1.css
[フォルダ] webpage/ch07
@charset "UTF-8"; table { border: 10px solid gray; border-spacing: 10px; } td { border: 1px solid gray; padding: 10px; }
横方向のセルを連結する
[作成] table3_1.html、table3.css
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table3.css"> <title>セルを横に連結する</title> </head> <body> <table> <tr> <td colspan="2">A1 </td> <td>A2</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> </tr> </table> </body> </html>
table3.css
@charset "UTF-8"; table { border: 1px solid gray; } td { border: 1px solid gray; }
縦方向のセルを連結する
[作成] table3_2.html
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table3.css"> <title>セルを縦に連結する</title> </head> <body> <table > <tr> <td rowspan="3">A1</td> <td>A2</td> </tr> <tr> <td>B1</td> </tr> <tr> <td>C1</td> </tr> </table> </body> </html>
テーブルのサイズをピクセル数で指定する
[作成] table4_1.html、table4_1.css
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table4_1.css"> <title>テーブルのサイズ</title> </head> <body> <table> <tr> <td>A1</td> <td>A2</td> </tr> <tr> <td>B1</td> <td>B2</td> </tr> </table> </body> </html>
table4_1.css
@charset "UTF-8"; table { border: 1px solid gray; width: 400px; height: 100px; } td { border: 1px solid gray; }
テーブルのサイズを比率指定する
[作成] table4_2.html、table4_2.css
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table4_2.css"> <title>テーブルのサイズ</title> </head> <body> <table> <tr> <td>A1</td> <td>A2</td> </tr> <tr> <td>B1</td> <td>B2</td> </tr> </table> </body> </html>
table4_2.css
@charset "UTF-8"; html,body{ height: 100%; } table { border: 1px solid gray; width: 70%; height: 80%; } td { border: 1px solid gray; }
セルのサイズをピクセル数で指定する
[作成] table4_3.html、table4_3.css
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table4_3.css"> <title>セルのサイズ</title> </head> <body> <table> <tr> <td>A1</td> <td>A2</td> </tr> <tr> <td>B1</td> <td>B2</td> </tr> </table> </body> </html>
table4_2.css
@@charset "UTF-8"; table { border: 1px solid gray; } td { border: 1px solid gray; width: 200px; height: 100px; }
セルのサイズをピクセル数で指定する
[作成] table4_4.html、table4_4.css
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table4_4.css"> <title>セルのサイズ</title> </head> <body> <table> <tr> <td class="td-first">A1</td> <td>A2</td> </tr> <tr> <td>B1</td> <td>B2</td> </tr> </table> </body> </html>
table4_2.css
@charset "UTF-8"; table { border: 1px solid gray; width: 400px; height: 200px; } td { border: 1px solid gray; } td.td-first { width: 70%; height: 60%; }
練習問題
[作成] table6.html、table6.css
[フォルダ] webpage/ch07
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table6.css"> <title>セルのサイズ</title> </head> <body> <table> <tr> <td colspan="3">111</td> </tr> <tr> <td rowspan="2">222</td> <td>333</td> <td>444</td> </tr> <tr> <td>555</td> <td>666</td> </tr> </table> </body> </html>
table4_2.css
@charset "UTF-8"; table { border-collapse: collapse; border: 1px solid gray; width: 350px; height: 140px; } td { border: 1px solid gray; }