如何在一个单元格中增加 table 个单元格

Question

我正在我的网站上制作一个硬件插件，我正在那里制作一个 table。在那个 table 中，我需要通过划分为 4 个主要单元格以及每个其他 3 个亚种等来做到这一点。我想在这些单元格中选择一个选项，因此我不知道如何使用它。我会给你一个我想要它作为图片的示例。我还将在下面附上我目前所拥有的代码。预先感谢您的帮助。

<table>
   <tr>
      <td>Monitor</td>
      <td>
         <select id="monitorSelect">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="monitor2Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="monitor3Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
      </td>
      <td>
         <select id="monitor4Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="monitor5Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="monitor6Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>Sluchátka</td>
      <td>
         <select id="sluchatkaSelect">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="sluchatka2Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="sluchatka3Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
      </td>
      <td>
         <select id="sluchatka4Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="sluchatka5Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="sluchatka6Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>Kamera</td>
      <td>
         <select id="kameraSelect">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="kamera2Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="kamera3Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
      </td>
      <td>
         <select id="kamera4Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="kamera5Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="kamera6Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>Tiskárna</td>
      <td>
         <select id="tiskárnaSelect">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="tiskárna2Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
         <select id="tiskárna3Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
      </th>
      <th>
         <select id="tiskárna4Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="tiskárna5Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
         <select id="tiskárna6Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
      </td>
   </tr>
</table>

我想要的样图：

Answer 1

您必须为要划分的 table 的每一行创建一个新行 (tr)。

之后，您在第一列分配属性 "rowspan"，匹配它所涵盖的行数（在您的情况下为 3）。

这里是W3School网站上关于"rowspan"属性的相关文档：click here!

无论如何，这是您需要的 table 的前 3 行，只是为了更好地了解该系统的工作原理：

<table border="1">
   <tr>
      <td rowspan="3">Monitor</td>
      <td>
         <select id="monitorSelect">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
      </td>
      <td>
         <select id="monitor4Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>
         <select id="monitor2Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
      </td>
      <td>
         <select id="monitor5Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>
         <select id="monitor3Select">
            <option>-----</option>
            <option>zobrazuje grafický výstup</option>
            <option>může fungovat k ovládání počítače</option>
            <option>reprodukuje zvuk</option>
            <option>může nahrávat zvuk</option>
            <option>nahrává video</option>
            <option>zobrazuje grafický výstup</option>
         </select>
      </td>
      <td>
         <select id="monitor6Select">
            <option>-----</option>
            <option>dotykovost</option>
            <option>velikost (palce)</option>
            <option>konektor</option>
            <option>způsob připojení</option>
            <option>integrovaný mikrofon</option>
            <option>rozlišení (px)</option>
            <option>rychlost (str./min)</option>
            <option>technologie tisku</option>
            <option>černobílá/barevná</option>
         </select>
      </td>
   </tr>
   <!-- and so on in other rows -->
</table>

P.S。如果您需要在 table 上显示边框，只需在 table 主标签上将属性 "border" 设置为 "1"！

安德里亚