如何在表中创建一个集成行？

Question

我有一张这样的表：

+----------+----------+
| record 1 | record 2 |
+----------+----------+
| record 3 | record 4 |
+----------+----------+
| record 5 | record 6 |
+----------+----------+

现在我想在第一行中添加一个集成行，类似于这个结构：

+---------------------+
|     Table Name      |
+----------+----------+
| record 1 | record 2 |
+----------+----------+
| record 3 | record 4 |
+----------+----------+
| record 5 | record 6 |
+----------+----------+

这是我的代码：

HTML：

<table cellspacing="0">
    <tr>
        <td>
            Table Name
        </td>
    </tr>
    <tr>
        <td>record 1</td>
        <td>record 2</td>
    </tr>
    <tr>
        <td>record 3</td>
        <td>record 4</td>
    </tr>
    <tr>
        <td>record 5</td>
        <td>record 6</td>
    </tr>
</table>

CSS：

td{    
    padding: 5px;
    border: 1px solid;
}

此处还有fiddle。

那么，我该怎么做？

Answer 1

您需要使用colspan属性。

td{    
    padding: 5px;
    border: 1px solid;
    text-align: center;
}

<table cellspacing="0">
    <tr>
        <td colspan="2">
            Table Name
        </td>
    </tr>
    <tr>
        <td>record 1</td>
        <td>record 2</td>
    </tr>
    <tr>
        <td>record 3</td>
        <td>record 4</td>
    </tr>
    <tr>
        <td>record 5</td>
        <td>record 6</td>
    </tr>
</table>

Answer 2

将vis = reactive({ data = dataInput() ## Option 1: and use layer_points(data=inrange) ## inrange <- with(dataInput(), dataInput()[score >=80 | score <= 50,]) ## Options 2, with opacity=~inrange inrange = +with(data, score >=80 | score <= 50) data %>% ggvis(x = ~year, y = ~score) %>% scale_numeric("y",domain = c(40,120)) %>% layer_points(opacity = ~inrange) %>% layer_lines() %>% make_rect(lims=rectLims) }) 与thead一起使用，以区分内容与标签。在colspan：

中制作其余内容

tbody

稍微调整一下CSS：

<table cellspacing="0">
    <thead>
        <tr>
            <th colspan="2">Table Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>record 1</td>
            <td>record 2</td>
        </tr>
        <tr>
            <td>record 3</td>
            <td>record 4</td>
        </tr>
        <tr>
            <td>record 5</td>
            <td>record 6</td>
        </tr>
    </tbody>
</table>

请参阅DEMO

Answer 3

使用colspan。

<table cellspacing="0">
    <tr>
        <td colspan="2">
            Table Name
        </td>
    </tr>
    <tr>
        <td>record 1</td>
        <td>record 2</td>
    </tr>
    <tr>
        <td>record 3</td>
        <td>record 4</td>
    </tr>
    <tr>
        <td>record 5</td>
        <td>record 6</td>
    </tr>
</table>

这是fiddle。

Answer 4

对表格标题使用caption元素：

  

caption元素代表table的标题   父

如Tables in the visual formatting model中所述，字幕框在表格包装盒内呈现为普通的块框，但在表格框之外：

  

table {
  border-spacing: 0;
}
caption, td {    
  padding: 5px;
  border: 1px solid;
}

<table>
  <caption>Table Name</caption>
  <tr>  <td>record 1</td> <td>record 2</td>  </tr>
  <tr>  <td>record 3</td> <td>record 4</td>  </tr>
  <tr>  <td>record 5</td> <td>record 6</td>  </tr>
</table>