时间戳

首页 > 解决方案 > 如何同时使用 col 和 rowspan？

html - 如何同时使用 col 和 rowspan？

问题描述

我正在尝试复制此表： 第三个表头有问题，我不知道如何制作双行和那 5 列以及如何制作表行和表数据以使其适合表头。

我以前从未使用过 colgroup 和 rowspan，我尝试混合我找到的一些示例，但我没有成功。

这是我到目前为止所拥有的：

<table border="1">
<caption>
  Poster availability
</caption>
<col>
<colgroup span="5"></colgroup>
<col>
<thead>
  <tr>
    <th scope="col">Poster name</th>
    <td rowspan="2"></td>
    <th scope="colrow" colspan="5">Color</th>
    <th scope="col">Sizes available</th>
  </tr>
  <tr>
    <th>1</th>
    <th scope="col">2</th>
    <th scope="col">3</th>
    <th scope="col">4</th>
    <th scope="col">5</th>
    <th  scope="col">6</th>
    <th>7</th>
  </tr>
</thead>

<tbody>
    <tr>
        <th scope="col">1</th>
        <th scope="col">2</th>
        <th scope="col">3</th>
        <th scope="col">4</th>
        <th scope="col">5</th>
        <th scope="col">6</th>
        <th scope="col">7</th>
    </tr>
</tbody>

标签： htmlhtml-tablecolgroup

解决方案

这是我解决它的方式，以防其他像我这样的新手有同样的问题

<table border="1">
    <col> 
    <col>
    <colgroup span="5"></colgroup>
     <col> 
        <tr>
            <td rowspan="2">EVIDENCIA DE APRENDIZAJE</td>
            <th rowspan="2">%</th>
            <th colspan="5" scope="colgroup">INDICADOR DE ALCANCE</th>
            <th rowspan="2">INSTRUMENTOS DE EVALUACIÓN</th>
        </tr>
        <tr>
        <th scope="col">A</th>
        <th scope="col">B</th>
        <th scope="col">C</th>
        <th scope="col">D</th>
        <th scope="col">E</th>
        </tr> 

        <tr>
            <td>EVIDENCIA 1</td>
            <td>50%</td>
            <td>A1</td>
            <td>B2</tds>
            <td>C3</td>
            <td>D4</td>
            <TD>E1</TD>
            <td>Instrumento 1</td>
        </tr>
    </table>

推荐阅读