Question

我正在编写下表的代码（我必须在表格中使用表格）

enter image description here

这是我的代码：

<html>
<body>

<table>

        <table border=1 cellspacing=0 width="250px">
            <tr>
                <td width=20%>1</td>
                <td width=20%>2</td>
                <td width=20%>3</td>
                <td width=20%>4</td>
                <td width=20%>5</td>
            </tr>
        </table>

        <table border=1 cellspacing=0 width="250px">
            <tr>
                <td width=60%>6</td>
                <td width=20%>7</td>
                <td width=20%>8</td>
            </tr>
        </table>

        <table border=1 cellspacing=0 width="250px">
            <tr>
                <td width=20%>9</td>
                <td width=20%>10</td>
                <td width=20%>11</td>
                <td width=20% rowspan=2>12</td>
                <td width=20%>13</td>
            </tr>

            <tr>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
            </tr>
        </table>

</table>

</body>
</html>

但是在浏览器中我得到了不同的东西，看起来像这样：

enter image description here

我是HTML的初学者，我正在尝试理解表格中的表格主要是通过练习来实现的。

Answer 1

这可以通过一个表来完成：

<强> HTML

<table border=1 >
    <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
    </tr>
    <tr>
                <td colspan="3">6</td>
                <td>7</td>
                <td>8</td>
    </tr>
    <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td rowspan=2>12</td>
                <td>13</td>
    </tr>
    <tr>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
    </tr>
</table>

JS小提琴： http://jsfiddle.net/HcRW3/

Answer 2

第3行中的rowspan无法工作，因为表只有一行。它对外面的桌子一无所知。

我真的不明白为什么你必须使用表中的表，但如果必须，外表只能有3行，第3嵌套表有两行。

Answer 3

我可以建议你使用colspan和Rowspan而不是表格中的表格更容易，以及我如何处理需要合并单元格的大多数表格。

你可以在这里找到一个colspan的例子： http://www.w3schools.com/tags/att_td_colspan.asp

和rowspan的一个例子： http://www.w3schools.com/tags/att_td_rowspan.asp

以下是执行此操作的代码示例：

<table border="1">
         <tr>
    <td>1</td>
    <td>2</td>
    <td >3</td>
<td>4</td>
<td>5</td>
  </tr>
  <tr>
    <td colspan="3">6</td>
    <td>7</td>
<td>8</td>
  </tr>
<tr>
    <td>9</td>
    <td>10</td>
    <td >11</td>
<td rowspan="2">12</td>
<td>13</td>
</tr>
<tr>
    <td>14</td>
    <td >15</td>
<td >16</td>
<td>17</td>
</tr>
</table>

Answer 4

可能会更好地为您服务：

<html>
<body>

<table border="1" cellspacing="0">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="3">6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td style="border-bottom: none;">12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td style="border-top: none;"></td>
        <td>17</td>
    </tr>
</table>

</body>
</html>

Answer 5

这不是答案，而只是我评论的延伸，以解释结果。

table不是tr的有效孩子，只有th和td有效为tr的孩子。

对于大多数浏览器，如果他们在元素内部检测到荣耀子元素，则将该子元素移动到该元素之后。重复此过程直到结构有效。由于table既不是tr也不是table的有效子项，因此内部表格都会移到周围的表格之外。浏览器最有可能使用原始代码创建的结果：

 <table>
   <tr>
         <table border=1 cellspacing=0>
             <tr>
                 <td width=20%>1</td>
                 <td width=20%>2</td>
                 <td width=20%>3</td>
                 <td width=20%>4</td>
                 <td width=20%>5</td>
             </tr>
         </table>
   </tr>
   <tr>
         <table border=1 cellspacing=0>
             <tr>
                 <td width=60%>6</td>
                 <td width=20%>7</td>
                 <td width=20%>8</td>
             </tr>
         </table>
   </tr>
   <tr>
         <table border=1 cellspacing=0>
             <tr>
                 <td width=20%>9</td>
                 <td width=20%>10</td>
                 <td width=20%>11</td>
                 <td width=20% rowspan=2>12</td>
                 <td width=20%>13</td>
             </tr>
         </table>

   </tr>
   <tr>
         <table border=1 cellspacing=0>
             <tr>
                 <td>14</td>
                 <td>15</td>
                 <td>16</td>
                 <td>17</td>
             </tr>
         </table>
   </tr>
 </table>

那么

将是：

 <table>
   <tr>
   </tr>
   <tr>
   </tr>
   <tr>
   </tr>
   <tr>
   </tr>
 </table>

 <table border=1 cellspacing=0>
     <tr>
         <td width=20%>1</td>
         <td width=20%>2</td>
         <td width=20%>3</td>
         <td width=20%>4</td>
         <td width=20%>5</td>
     </tr>
 </table>
 <table border=1 cellspacing=0>
     <tr>
         <td width=60%>6</td>
         <td width=20%>7</td>
         <td width=20%>8</td>
     </tr>
 </table>
 <table border=1 cellspacing=0>
     <tr>
         <td width=20%>9</td>
         <td width=20%>10</td>
         <td width=20%>11</td>
         <td width=20% rowspan=2>12</td>
         <td width=20%>13</td>
     </tr>
 </table>
 <table border=1 cellspacing=0>
     <tr>
         <td>14</td>
         <td>15</td>
         <td>16</td>
         <td>17</td>
     </tr>
 </table>

Answer 6

我很确定你应该能够在一张桌子里做到这一点。像这样，

        <table border=1 cellspacing=0>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>

            <tr>
                <td colspan=3>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <tdrowspan=2>12</td>
                <td>13</td>
            </tr>
            <tr>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
            </tr>
       </table>

Answer 7

您应该尽量不在表格中放置表格。 “Rowspan”和“colspan”是个好主意。您可能想要使用'valign'顶部（垂直对齐）以确保12与行保持在同一级别。

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>

    <tr>
        <td colspan="3">6</td>
        <td>7</td>
        <td>8</td>
    </tr>

    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td rowspan="2" valign="top">12</td>
        <td>13</td>
    </tr>

    <tr>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
    </tr>
</table>

表中的表

7 个答案: