Question

我的示例非常接近..但有一个问题，了解如何使扩展占据2的空间..我不好解释任何让我发布我的代码和我的例子，你会看到我是什么的意思。

    <!Doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="schedule.css">


        <title>My Sample ScheduleR_M</title>
    </head>

    <body>
        <h1>R_M Fake Winter Schedule</h1>
        <table>
        <caption>
        Winter
        <br>
        2016
        <br>
        Schedule
        </caption>
            <tr>
                <th>       </th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        <tr>
            <td>8:30</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
        </tr>
        <tr>
            <td>9:30</td>
            <td>Office Hours</td>
            <td>IS 107</td>
            <td>IS 107</td>
            <td>IS 107</td>
        </tr>
        <tr>
            <td>10:30</td>
            <td>IS 105</td>
            <td>IS 105</td>
            <td>IS 105</td>
            <td rowspan="2" class="space">     </td>
        </tr>
        <tr>
            <td>11:30</td>
            <td>IS 120</td>
            <td>IS 120</td>
            <td>IS 120</td>
            <td>      </td>
        </tr>
        <tr>
            <td>12:30</td>
            <td>Lunch</td>
        </tr>

    </table>
    </body>
    </html>


    table {
        margin-left: 20px;
        margin-right: 20px;
        border: thick solid green;
        caption-side: right;
        border-collapse: collapse;
    }

    h1  {
        color: red;
        border-bottom: thin dotted red;
    }

    td, th {
        border: thin dotted gray;
        padding: 5px;

    }

    th   {
        color: orange;
        background-color: purple;

    }
  td:first-child {
        color: orange;
        background-color: purple;
    }


    caption {
        font-style: italic;

    }

THIS IS ThE Example 我得到它.pdf格式我无法检查，只是看起来只是为了解决方式，如果有人可以解释我做错了..就像我说我感觉很接近...谢谢你们希望我提供足够的信息

<!Doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="schedule.css">


    <title>My Sample ScheduleR_M</title>
</head>

<body>
    <h1>R_M Fake Winter Schedule</h1>
    <table>
    <caption>
    Winter
    <br>
    2016
    <br>
    Schedule
    </caption>
        <tr>
            <th>       </th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>
    <tr>
        <td>8:30</td>
        <td>IS 210</td>
        <td>IS 210</td>
        <td>IS 210</td>
        <td>IS 210</td>
        <td>IS 210</td>
    </tr>
    <tr>
        <td>9:30</td>
        <td colspan="2" style="background-color: #D3D3D3; text-align: center;">Break time</td>
        <td>IS 107</td>
        <td>IS 107</td>
        <td>IS 107</td>
    </tr>
    <tr>
        <td>10:30</td>
        <td>IS 105</td>
        <td>IS 105</td>
        <td>IS 105</td>
        <td rowspan="2" colspan="2" style="background-color: #D3D3D3; text-align: center;">break time</td>
    </tr>
    <tr>
        <td>11:30</td>
        <td>IS 120</td>
        <td>IS 120</td>
        <td>IS 120</td>
        <td>      </td>
    </tr>
    <tr>
        <td>12:30</td>
        <td colspan="5" style="background-color: gray; text-align: center;">Lunch</td>
    </tr>

</table>
</body>
</html>


table {
    margin-left: 20px;
    margin-right: 20px;
    border: thick solid green;
    caption-side: right;
    border-collapse: collapse;
}

h1  {
    color: red;
    border-bottom: thin dotted red;
}

td, th {
    border: thin dotted gray;
    padding: 5px;

}

th   {
    color: orange;
    background-color: purple;

}
 td:first-child {
    color: orange;
    background-color: purple;
}


caption {
    font-style: italic;

}

上面的代码导致那里有一个空的新tr列我做错了什么..？谢谢你们！

Answer 1

使用colspan水平合并单元格，rowspan垂直合并单元格。

这是更新的代码段，我删除了一些额外的td。

    table {
        margin-left: 20px;
        margin-right: 20px;
        border: thick solid green;
        caption-side: right;
        border-collapse: collapse;
    }

    h1  {
        color: red;
        border-bottom: thin dotted red;
    }

    td, th {
        border: thin dotted gray;
        padding: 5px;

    }

    th   {
        color: orange;
        background-color: purple;

    }
  td:first-child {
        color: orange;
        background-color: purple;
    }


    caption {
        font-style: italic;

    }

<!Doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="schedule.css">


        <title>My Sample ScheduleR_M</title>
    </head>

    <body>
        <h1>R_M Fake Winter Schedule</h1>
        <table>
        <caption>
        Winter
        <br>
        2016
        <br>
        Schedule
        </caption>
            <tr>
                <th>       </th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        <tr>
            <td>8:30</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
        </tr>
        <tr>
            <td>9:30</td>
            <td colspan="2">Office Hours</td>
            <td>IS 107</td>
            <td>IS 107</td>
            <td>IS 107</td>
        </tr>
        <tr>
            <td>10:30</td>
            <td>IS 105</td>
            <td>IS 105</td>
            <td>IS 105</td>
            <td rowspan="2" colspan="2" class="space">  Office Space   </td>
        </tr>
        <tr>
            <td>11:30</td>
            <td>IS 120</td>
            <td>IS 120</td>
            <td>IS 120</td>
           
        </tr>
        <tr>
            <td>12:30</td>
            <td colspan="5">Lunch</td>
        </tr>

    </table>
    </body>
    </html>

Answer 2

rowpans和colspans的基本原则是：如果你在第一行的rowspan:2中使用td，那么你的第二行必须有一列小于第一行，因为一个单元格从顶部向下延伸到第二行。与colspans一样。

如果你的最后一行中有一个colspan = 5，那么你只需要2个单元/ td s，因为1 + 5加起来就是其他行所拥有的6个单元。

我用下面的colspans和rowpans重新创建了你的例子。我还分配了一个名为＆＃34; center＆＃34;到跨越多列的td，以便将文本放在那些较大的单元格中。

＆＃13;

table {
    margin-left: 20px;
    margin-right: 20px;
    border: thick solid green;
    caption-side: right;
    border-collapse: collapse;
}

h1  {
    color: red;
    border-bottom: thin dotted red;
}

td, th {
    border: thin dotted gray;
    padding: 5px;

}

th   {
    color: orange;
    background-color: purple;

}
 td:first-child {
    color: orange;
    background-color: purple;
}


caption {
    font-style: italic;

}
.center { text-align: center; }

＆＃13;

<table>
        <caption>
        Winter
        <br>
        2016
        <br>
        Schedule
        </caption>
            <tr>
                <th>       </th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        <tr>
            <td>8:30</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
            <td>IS 210</td>
        </tr>
        <tr>
            <td>9:30</td>
            <td colspan="2" class="center" >Office Hours</td>
            <td>IS 107</td>
            <td>IS 107</td>
            <td>IS 107</td>
        </tr>
        <tr>
            <td>10:30</td>
            <td>IS 105</td>
            <td>IS 105</td>
            <td>IS 105</td>
            <td rowspan="2" colspan="2" class="center"> Office Hours</td>
        </tr>
        <tr>
            <td>11:30</td>
            <td>IS 120</td>
            <td>IS 120</td>
            <td>IS 120</td>
        </tr>
        <tr>
            <td>12:30</td>
            <td colspan="5" class="center">Lunch</td>
        </tr>

    </table>

＆＃13;

扩展表

2 个答案: