Question

我有一个关于HTML表格的问题，我无法找到自己。

是否可以在一个表中使用HTML和内联css创建此布局？

enter image description here

我尝试在第4行合并我的单元格（我开始使用3列布局），因为我需要2个单元格，如果我的表格宽度为640px，并且我对两个单元格强制为320px，则整个表格变得混乱。

编辑：第四行是问题，我需要2个相等宽度的单元格。

提前致谢。

Answer 1

<table border=1>
  <tr>
    <td colspan="4">Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td colspan="2">Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td colspan="4">Cell</td>
  </tr>
  <tr>
    <td colspan="2">Cell</td>
    <td colspan="2">Cell</td>
  </tr>
</table>

Answer 2

同一列中的所有单元格必须具有相同的宽度，因此您需要一个额外的列：

第一行：一个细胞colspan = 4
第二行：一个单元格，单元格colspan = 2，一个单元格
第三行：一个细胞colspan = 4
第四行：一个细胞colspan = 2，一个细胞colspan = 2

每列的宽度如下所示：

第1列很窄，让我们说宽度= 50px
第2列是320 - 第1列的宽度，280px
第3列与2,280px
第4列与1相同，例如50像素

Answer 3

<table border="1">
        <tr>
            <td colspan="4">cell</td>
        </tr>
        <tr>
            <td>cell</td>
            <td colspan="2">cell</td>
            <td>cell</td>
        </tr>
        <tr>
            <td colspan="4">cell</td>
        </tr>
        <tr>
            <td colspan="2">cell</td>
            <td colspan="2">cell</td>
        </tr>
    </table>

Answer 4

<table border="1" width="100%">   
   <tr>
    <td colspan="4">Cell</td>   
   </tr>   
    <tr>
    <td width="10%">Cell</td>
    <td colspan="2">Cell</td>
    <td width="10%">Cell</td>   
   </tr>   
    <tr>
    <td colspan="4">Cell</td>   
  </tr>   
  <tr>
    <td colspan="2" width="50%">Cell</td>
    <td colspan="2" width="50%">Cell</td>   
 </tr>

检查DEMO

Answer 5

像这样使用。它的工作原理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    td{
        text-align:center;
    }
    </style>
    </head>

    <body>
    <table width="640" cellspacing="5">
      <tr>
        <td colspan="4">Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td colspan="2">Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td colspan="4">Cell</td>
      </tr>
      <tr>
        <td colspan="2">Cell</td>
        <td colspan="2">Cell</td>
      </tr>
    </table>

    </body>
    </html>

HTML多表列问题

5 个答案: