Question

我有这个表，在这个表中有4列，如下所示：

Column1|Column2|Column3|Column4|
data 1  data 2  data 3  data 4

但我怎么得到这样的呢？

Column1| data 1
Column2| data 2
Column3| data 3
Column4| data 4

这是我的代码：

<table>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
    </tr>
</table>

有什么想法吗？它甚至可能吗？

Answer 1

像这样：

<table>
    <tr>
        <th>Column1</th>
        <td>Data 1</td>
    </tr>
    <tr>
        <th>Column2</th>
        <td>Data 2</td>
    </tr>
    <tr>
        <th>Column3</th>
        <td>Data 3</td>
    </tr>
    <tr>
        <th>Column4</th>
        <td>Data 4</td>
    </tr>
</table>

Answer 2

你把th放在表格行

<table>
  <tbody>
    <tr>
       <th>Column 1</th>
       <td>Data 1</td>
    </tr>
    <tr>
       <th>Column 2</th>
       <td>Data 2</td>
    </tr>
  </tbody>
</table>

Answer 3

<table>
    <tr>
        <th>Column 1</th>
        <td>Data 1</td>
    </tr>
    <tr>
        <th>Column 2</th>
        <td>Data 2</td>
    </tr>
    <tr>
        <th>Column 3</th>
        <td>Data 3</td>
    </tr>
    <tr>
        <th>Column 4</th>
        <td>Data 4</td>
    </tr>
</table>

Answer 4

也许范围属性可以帮到你？

<table>
    <tr scope="row">
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
    </tr>
    <tr>
       <td>Some content</td>
       <td>Some content</td>
       <td>Some content</td>
       <td>Some content</td>
    </tr>
</table>

同样here，您可以通过CSS获得另一种解决方案。

Answer 5

你可以使用以下模式但我建议你使用css表：Page layout, Divs instead of Tables

<table>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
</table>

HTML表其他方式？

5 个答案: