Question

我是前端HTML的新手，并尝试构建一个与下面示例相同的表格，我的单元格编号与此相同。

渲染时我的代码就像这样。

我正在努力弄清楚如何实现细胞编号。我做了一些事情，但它看起来不太好。这是通过colspan完成的。

<table border="1">
          <tr>
            <td>Bruce Springsteen Born To Run</td>
            <td><img src="images/borntorun.jpg" alt="bruce springsteen"></td>
          </tr>
          <tr>
            <td>Thunder Road</td>
            <td>4.47</td>
          </tr>
          <tr>
            <td>10th Avenue Freeze Out</td>
            <td>3.10</td>
          </tr>
          <tr>
            <td>Night</td>
            <td>3.00</td>
          </tr>
            <td>Backstreets</td>
            <td>6.29</td>
          </tr>
          <tr>
            <td>Born To Run</td>
            <td>4.29</td>
          </tr>
          <tr>
            <td>She's the one</td>
            <td>4.29</td>
          </tr>
          <tr>
            <td>Meeting Across The River</td>
            <td>3.15</td>
          </tr>
          <tr>
            <td>Jungleland</td>
            <td>9.33</td>   
        </table>

Answer 1

<table border="1">
      <tr>
        <td>1</td>
        <td>Bruce Springsteen Born To Run</td>
        <td><img src="images/borntorun.jpg" alt="bruce springsteen"></td>
      </tr>
      <tr>
        <td>2</td>
        <td>Thunder Road</td>
        <td>4.47</td>
      </tr>
      <tr>
        <td>3</td>
        <td>10th Avenue Freeze Out</td>
        <td>3.10</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Night</td>
        <td>3.00</td>
      </tr>
        <td>5</td>
        <td>Backstreets</td>
        <td>6.29</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Born To Run</td>
        <td>4.29</td>
      </tr>
      <tr>
        <td>7</td>
        <td>She's the one</td>
        <td>4.29</td>
      </tr>
      <tr>
        <td>8</td> 
        <td>Meeting Across The River</td>
        <td>3.15</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Jungleland</td>
        <td>9.33</td>   
    </table>

你可以使用它并添加1列，你可以得到你想要的。

Answer 2

如果您需要更多信息search here，您可以使用Bootstrap并使其具有响应性，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">      
  <div class="row">
    <div class="col-xs-6" style="background-color:yellow;">
      Bruce Springsteen Born To Run
    </div>
    <div class="col-xs-6" style="background-color:pink;">
      <img src="images/borntorun.jpg" alt="bruce springsteen">    
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2" style="background-color:yellow;">
      1
    </div>
    <div class="col-xs-5" style="background-color:pink;">
         Thunder Road  
    </div>
    <div class="col-xs-5" style="background-color:pink;">
      4.47    
    </div>
    <div class="col-xs-2" style="background-color:yellow;">
      2
    </div>
    <div class="col-xs-5" style="background-color:pink;">
         10th Avenue Freeze Out
    </div>
    <div class="col-xs-5" style="background-color:pink;">
      3.10   
    </div>
  </div>
</div>

</body>
</html>

Answer 3

您可以使用colspan来执行此操作。

＆＃13;

<table border="1" width="100%">
  <tr>
    <td colspan="2">Bruce Springsteen Born To Run</td>
    <td><img src="http://www.trait-tech.com/uploads/T-TOOL-9406__Acrylic-Mirror-Effect-3d-Wall-Decals-Flower-Shaped-Mirrors-Stickers-Pack-of-5-Set-for-Halloween-Chirstmas-Valentine-.jpg" alt="bruce springsteen"></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Thunder Road</td>
    <td>4.47</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10th Avenue Freeze Out</td>
    <td>3.10</td>
  </tr>
  <!--Other rows here-->
</table>

＆＃13;

HTML表格单元格问题

3 个答案: