TECH I.S.

HTML テーブルのコルスパンとロースパン


HTML テーブルには、複数の行や列にまたがるセルを含めることができます。


名前
エイプリル
2022年
フィエスタ

HTML テーブル - Colspan

複数の列にまたがるセルを作成するには、colspan属性:

<table>   <tr>     <th colspan="2">Name</th>     <th>Age</th>   </tr>   <tr>     <td>Jill</td>     <td>Smith</td>     <td>43</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>     <td>57</td>   </tr> </table>

自分で試してみる »

ノート:の値は、colspan属性は、またがる列の数を表します。


HTML テーブル - 行スパン

セルが複数の行にまたがるようにするには、rowspan属性:

<table>   <tr>     <th>Name</th>     <td>Jill</td>   </tr>   <tr>     <th rowspan="2">Phone</th>     <td>555-1234</td>   </tr>   <tr>     <td>555-8745</td> </tr> </table>

自分で試してみる »

ノート:の値rowspan属性は、またがる行数を表します



HTML の演習

演習で自分をテストする

エクササイズ:

正しい HTML 属性を使用して、最初の TH 要素が 2 列にまたがるようにします。

<table>
  <tr>
    <th >Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

演習を開始する)



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細