如何建立这个HTML表格 [英] How to create this HTML table

问题描述

如何创建具有以下布局的表?

第一行的第二和第三td出现问题.我一直在和colspan玩，但无法正常工作.

解决方案

以每行具有7个单元格的表为例，获取该单元格分布(1 +(2 * 3)个单元格)并使用colspan属性，如下所示:

 表{宽度:100％;}td {边框:1px实线#777；内边距:10px;}td:第一个孩子{宽度:30％;}  

 < table>< tr>< td> a</td>< td colspan ="3"> b</td>< td colspan ="3"> c</td></tr>< tr>< td> a</td>< td colspan ="2"> b</td>< td colspan ="2"> c</td>< td colspan ="2"> d</td></tr></table>  

How can I create a table with the following layout?

I'm having problem with the second and third td in the first row. I've been playing with colspan but couldn't get it to work.

解决方案

Think of a table with 7 cells per row to get that cell distribution (1 + ( 2 * 3 ) cells) and use colspan attributes as follows :

table {
width: 100%;
}
td {
  border: 1px solid #777;
  padding: 10px;
}
td:first-child {
  width: 30%;
}

<table>
  <tr>
    <td>a</td>
    <td colspan="3">b</td>
    <td colspan="3">c</td>
  </tr>
  <tr>
    <td>a</td>
    <td colspan="2">b</td>
    <td colspan="2">c</td>
    <td colspan="2">d</td>

  </tr>
</table>

这篇关于如何建立这个HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！