web-dev-qa-db-ja.com

HTMLテーブルの行に可変数のセルを含めることはできますか？

または、セルの総数をcolumns * rowsに等しくする必要がありますか？

異なる行に異なるセル数を持つテーブルは、W3バリデーターに合格しているようです。

htmlhtml-table
17
randomguy

それは定義に違反しません。ただし、 colspan 属性を使用して、列を行全体に展開する必要があります。

<table>
  <tr>
    <td>Row with</td>
    <td>2 cols</td>
  </tr>
  <tr>
    <td colspan="2">Row with only one col</td>
  </tr>
</table>

セルの周囲に境界線がある場合にも役立ちます。

2行に拡張される列を持つテーブルを作成することもできます。

<table>
  <tr>
    <td rowspan="2">First column in row 1 and row 2</td>
    <td>Second column in row 1</td>
  </tr>
  <tr>
    <td>second column in row 2</td>
  </tr>
</table>
22
2ndkauboy

colspanを使用できますが、テーブルが正しくレンダリングされるためには、colspan値を含む合計が等しくなければなりません。

<table>
  <tr>
     <td colspan="2">blah</td>
  </tr>
  <tr>
     <td>blah</td>
     <td>boo</td>
  </tr>
</table>

最初の行には1つのセルがありますが、colspanのために2つのセルにまたがっており、2番目の行には2つのセルがあり、これは完全に有効です。

7
meder omuraliev

はい、できます。In table > tr > td、tdにはコンテンツが含まれています。 Tdここでの参照： http://www.htmlcodetutorial.com/tables/_TD.html 。そのリファレンスでは、TDにはcolspanとrowspanの2つの属性があることがわかります。 ）。これらの2つの属性を使用することにより、テーブルは異なる行に異なる量のセルを持つことができます。
デモ：

<table border="1">
     <tr>
          <td>a</td>
          <td>b</td>
     </tr>
     <tr> 
          <td colspan="2">c</td>
     </tr>
</table>

そして

<table border="1">
     <tr>
          <td rowspan="2">a</td>
          <td>b</td>
     </tr>
     <tr> 
          <td>c</td>
     </tr>
</table>
3
Bang Dao

はい、HTMLテーブルを作成し、一部の行で<td>要素を省略できますが、HTMLレンダラー（ブラウザー）がこの状況をどのように処理するかわからないため、これは不適切な形式と見なされます。ブラウザによってレンダリングが若干異なる場合があります。

行ごとに表示されるセルの数が異なるテーブルを定義するための推奨される方法は、colspanを使用して2つ以上の隣接するセルを1つに結合することです。これにより、右端のセルが正しい列に整列されたままになり、HTMLレンダラーに実行させたいことに関するあいまいさがなくなります。

2
dthorpe

使いました：

<table>
<thead>
    <th>Column one</th>
    <th>Column two</th>
    <th>Column three</th>
</thead>
<tbody>
    <tr>
        <td rowspan="2">A large cell</td>
        <td>Another small cell0</td>
        <td>Another small cell0</td>
    </tr>
    <tr>
        <td>Another small cell1</td>
        <td>Another small cell1</td>
    </tr>
</tbody>
2
binhhoang18