HTMLテーブル
表は私たちの日常生活で非常に一般的ですが、Web ページに表を出力するにはどうすればよいでしょうか?
<table> タグは HTML テーブルを定義します。
単純な HTML テーブルは、table 要素と 1 つ以上の tr、th、または td 要素で構(gòu)成されます。
tr 要素はテーブル行を定義し、番目の要素はテーブルヘッダーを定義し、td 要素はテーブルセルを定義します。
最も単純なフォームを作ってみましょう
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="10"> <tr> <td>1月份</td> <td>¥100</td> </tr> <tr> <td>二月份</td> <td>¥200</td> </tr> </table> </body> </html>
プログラムの実行結(jié)果:
cellspacing、セル間の距離
cellpadding 、テキストからの距離セルの境界線はピクセル?yún)g位です
border テキストに境界線を追加します border を border=0 に設(shè)定すると、表に境界線が表示されなくなります
上記 3 つの屬性値は自分で設(shè)定できます、獨自の要件に従って
HTML テーブル ヘッダーを設(shè)定します
テーブル ヘッダーは <th> タグを使用して定義されます。 ほとんどのブラウザでは、表のヘッダーが太字で中央揃えのテキストとして表示されます:例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="10"> <th>月份</th> <th>金額</th> <tr> <td>1月份</td> <td>¥100</td> </tr> <tr> <td>二月份</td> <td>¥200</td> </tr> </table> </body> </html>
プログラムの実行結(jié)果:
コルスパンと行スパン
<td>タグにcolspan屬性とrowspan屬性を追加することでセルを縦橫に結(jié)合できます
インスタンス
プログラムの実行結(jié)果:マージ後、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <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>
コードの実行結(jié)果をもう一度見てください:
パターンを探してください
その他の例
この例は、枠線のないテーブルを示しています。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20"> <tr> <td colspan="2">單元格</td> <td>單元格</td> </tr> <tr> <td rowspan="2">單元格</td> <td>單元格</td> <td rowspan="2">單元格</td> </tr> <tr> <td>單元格</td> </tr> </table> </body> </html>
プログラムの実行結(jié)果:
Example
この例では、さまざまな要素內(nèi)に要素を表示する方法を示します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h4>這個表格沒有邊框:</h4> <table> <tr> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table> <h4>這個表格沒有邊框:</h4> <table border="0"> <tr> <td>200</td> <td>300</td> </tr> <tr> <td>500</td> <td>600</td> </tr> </table> </body> </html>
コードの実行結(jié)果:
HTMLテーブルタグ