如何在 Html 中创建表格答案

【问题标题】：How to create a table in Html如何在 Html 中创建表格
【发布时间】：2020-05-31 01:09:47
【问题描述】：

任何人都可以帮助创建一个与此完全相同的 html 表格。谢谢大家的帮助。 https://drive.google.com/open?id=1PDR4ci3etM0YSZlFIP7F4bbFr1zXEk9r

【问题讨论】：

你应该检查 css 的网格系统。你可以比使用 HTML 表格更容易地做到这一点。

【解决方案1】：

这就是我们在 html 中创建表格的方式。请参阅下文了解更多信息，请关注此

 <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
    </table>

Html 教程链接：https://www.w3schools.com/html/html_tables.asp

【讨论】：

【解决方案2】：

下面是一些代码的示例：

<table border="1"><caption>Phone numbers</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th colspan="2">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>20</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>23</td>
            </tr>

   <tfoot></tfoot>

【讨论】：

【解决方案3】：

有一个方便的小工具可以帮助你生成这种类型的东西：https://www.tablesgenerator.com/html_tables 这是一个帮助您入门的代码 sn-p。

<table border="1px">
<tbody>
  <tr>
<td rowspan="3">Day</td>
<td colspan="3">Seminar</td>
  </tr>
  <tr>
<td colspan="2">Schedule</td>
<td rowspan="2">Topic</td>
  </tr>
  <tr>
<td>Begin</td>
<td>End</td>
  </tr>
  <tr>
<td rowspan="2">Monday</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td>Intro</td>
  </tr>
  <tr>
<td></td>
  </tr>
  <tr>
<td rowspan="3">Tuesday</td>
<td></td>
<td></td>
<td></td>
  </tr>
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
  <tr>
<td>Wednesday</td>
<td></td>
<td></td>
<td></td>
  </tr>
</tbody>
</table>

【讨论】：

【解决方案4】：

您可以使用Bootstrap 类名作为colspan 和rowspan 来实现您想要的表格结果。我看到了你的截图，也许这就是你想要的输出？

这是colspan 和rowspan 的完整Youtube tutorial

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    tr {
      border: teal 5px solid;
    }

    td {
      border: turquoise 5px solid;
    }

    td {
      border: tomato 5px solid;
    }
  </style>
</head>

<body>
  <table class="table" style="text-align: center;">
    <tr>
      <th colspan="3">Title-1</th>
      <th colspan="2">Title-2</th>
      <th>Title-3</th>
    </tr>
    <tr>
      <td colspan="3" rowspan="2">Row 1</td>
      <td colspan="2">Row 1-1</td>
      <td>Row 1-1</td>
    </tr>
    <tr>
      <td>Row 1-2</td>
      <td>Row 1-2</td>
      <td>Row 1-2</td>
    </tr>
    <tr>
      <td colspan="3" rowspan="3">Row 2</td>
      <td>Row 2-1</td>
      <td>Row 2-1</td>
      <td>Row 2-1</td>
    </tr>
    <tr>
      <td colspan="2">Row 2-2</td>
      <td>Row 2-2</td>
    </tr>
  </table>
</body>

</html>

【讨论】：