HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLテーブルのColspanとRowspan


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


名前  
     
     
     
     
4月    
   
   
     
     
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列にまたがるようにします。

<テーブル>
  <tr>
    <th>名前</ th>
    <th>年齢</ th>
  </ tr>
  <tr>
    <td>ジル</ td>
    <td>スミス</ td>
    <td> 50 </ td>
  </ tr>
  < tr>
    <td>イブ</ td>
    <td>ジャクソン</ td>
    <td> 94 </ td>
  </ tr>
</ table>