主页 / 问题 / 1534791
Accepted
Pavel
Asked:2023-08-08 13:31:32 +0000 UTC2023-08-08 13:31:32 +0000 UTC

如何在html中制作一个三列和一个公共单元格的表格？

  • 772

如何在 html 中制作一张包含三列和一个公共单元格的表格。我使用 bootstrap 制作了一个表格，但我不明白该怎么做

在此输入图像描述

我将不胜感激任何帮助！

html

1 个回答

  1. Best Answer

    <!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>table</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <table class="table table-striped table-light table-bordered text-center fw-bold">
      <thead>
        <tr>
          <th colspan="3" scope="col" class="bg-success text-white">Dimensions, mm</th>
        </tr>
        <tr>
          <th scope="col" class="bg-success text-white">L</th>
          <th scope="col" class="bg-success text-white">W</th>
          <th scope="col" class="bg-success text-white">H</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>97</td>
          <td>24</td>
          <td>56</td>
        </tr>
        <tr>
          <td>70</td>
          <td>47</td>
          <td>105</td>
        </tr>
        <tr>
          <td>151</td>
          <td>36</td>
          <td>98</td>
        </tr>
        <tr>
          <td>151</td>
          <td>36</td>
          <td>98</td>
        </tr>
        <tr>
          <td>151</td>
          <td>51</td>
          <td>99</td>
        </tr>
        <tr>
          <td>98</td>
          <td>43</td>
          <td>57</td>
        </tr>
        <tr>
          <td>179</td>
          <td>36</td>
          <td>66</td>
        </tr>
        <tr>
          <td>91</td>
          <td>70</td>
          <td>107</td>
        </tr>
        <tr>
          <td>91</td>
          <td>70</td>
          <td>100</td>
        </tr>
        <tr>
          <td>151</td>
          <td>65</td>
          <td>99,5</td>
        </tr>
        <tr>
          <td>151</td>
          <td>65</td>
          <td>99,5</td>
        </tr>
        <tr>
          <td>151</td>
          <td>65</td>
          <td>100</td>
        </tr>
        <tr>
          <td>151</td>
          <td>98</td>
          <td>100</td>
        </tr>
        <tr>
          <td>182</td>
          <td>77</td>
          <td>166</td>
        </tr>
        <tr>
          <td>175</td>
          <td>175</td>
          <td>125</td>
        </tr>
        <tr>
          <td>197</td>
          <td>172</td>
          <td>176</td>
        </tr>
        <tr>
          <td>331</td>
          <td>202</td>
          <td>222</td>
        </tr>
      </tbody>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

    这是可以做到的

    • 1

相关问题