1

我正在尝试使用经典的 HTML 表格结构创建一个看起来像这样的表格：

在此处输入图像描述

从左到右思考，我想出了以下 HTML，这是一场灾难。我错过了什么吗？

<html>
<body>
<table border = 1 width=640 height=480>
<tr>
    <td rowspan=2 colspan=2>1</td>
    <td rowspan=4 colspan=4>2</td>
    <td rowspan=2 colspan=2>3</td>
<tr>
    <td rowspan=2 colspan=2>4</td>
    <td rowspan=2 colspan=2>5</td>
</tr>
<tr>
    <td rowspan=4 colspan=4>6</td>
    <td rowspan=2 colspan=2>7</td>
    <td rowspan=1 colspan=1>8</td>
    <td rowspan=1 colspan=1>9</td>
</tr>
<tr>
    <td rowspan=1 colspan=1>10</td>
    <td rowspan=1 colspan=1>11</td>
</tr>
<tr>
    <td rowspan=2 colspan=2>12</td>
    <td rowspan=2 colspan=2>13</td>
</tr>
</table>
</body>
</html>
4

2 回答 2

3

这是给你的代码。我希望这对您有用，因为我花了一个小时尝试为您创建它。（注意 HTML 5 建议使用 CSS，但由于您只希望在经典 html 中使用它，因此这里是您的解决方案）

<table width="800" height="400">
        <tr width=50%>
            <td width="33%" bgcolor="#6CBB3C"></td>
            <td width="33%" rowspan="2" bgcolor="#C24641" width=40%></td>
            <td width="33%" bgcolor="#6CBB3C"></td>
        </tr>

        <tr width=50%>
            <td width="33%" bgcolor="#6CBB3C"></td>

            <td width="33%" bgcolor="#6CBB3C"></td>
        </tr>

    </table>


    <table width="800" height="400">
        <tr width="50%">
            <td width="50%" rowspan="2" bgcolor="#C24641" width=40%></td>
            <td width="25%" bgcolor="#6CBB3C"></td>
            <td width="25%" bgcolor="#6CBB3C" height="200pix" bgcolor="white">


                <table width="100%" height="200pix" bordercolor="white"
                    bgcolor="white">

                    <tr>
                        <td bgcolor="#7A5DC7"></td>

                        <td bgcolor="#7A5DC7"></td>
                    </tr>

                    <tr>
                        <td bgcolor="#7A5DC7"></td>

                        <td bgcolor="#7A5DC7"></td>
                    </tr>
                </table>
        </td>
        </tr>

        <tr width="50%">
            <td bgcolor="#6CBB3C"></td>

            <td bgcolor="#6CBB3C"></td>
        </tr>

    </table>

这是给你的结果： 在此处输入图像描述

于 2013-09-10T00:22:25.073 回答
3

一张用 CSS 设置样式的表格。

HTML

<table>
  <tr>
    <td class="green"></td>
    <td colspan="2" rowspan="2" class="red"></td>
    <td class="green" colspan="2"></td>
  </tr>
  <tr>
    <td class="green"></td>
    <td class="green" colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2" rowspan="3" class="red"></td>
    <td rowspan="2" class="green"></td>
    <td class="blue"></td>
    <td class="blue"></td>
  </tr>
  <tr>
    <td class="blue"></td>
    <td class="blue"></td>
  </tr>
  <tr>
    <td class="green"></td>
    <td colspan="2" class="green"></td>
  </tr>
</table>

CSS

table {
  table-layout: fixed;
  border-collapse: collapse;
  max-width: 8em;
  width: 100%;
}
td {
  border: 1px solid white;
}
.green {
  background: rgb(155,187,89);
  height: 2em;
  width: 2em;
}
.red {
  background: rgb(192,80,77);
  height: 4em;
  width: 4em;
}
.blue {
  background: rgb(79,129,189);
  height: 1em;
  width: 1em;
}

结果

截屏

于 2014-08-02T20:00:11.700 回答