Проблема с ячейкой HTML-таблицы

Я новичок в интерфейсе HTML и пытаюсь построить таблицу, идентичную приведенному ниже примеру, в которой у меня есть нумерация ячеек, идентичная этому. Проблема с ячейкой 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>

источник

2017-02-06 Syntax Killer

цифры, скорее всего, просто еще один столбец, который появляется код, отсутствует – Timmy

Go посмотреть, что RowSpan/Объединение столбцов делать, а затем использовать дополнительные ячейки для чисел. – CBroe

Я думаю, что ключевое слово, которое вы ищете, это 'colspan'. Используйте его в первой строке для первого элемента и добавьте дополнительный столбец для всех остальных строк. – Sirko

<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 столбец в нем, и вы можете получить то, что вы хотите.

источник

2017-02-06 12:42:00

Вы можете использовать Bootstrap и сделать его отзывчивым, а также, если вам нужно больше информации search here, пример:

<!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>

источник

2017-02-06 12:43:20 El0din

Вы можете использовать colspan, чтобы сделать это.

<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>

источник

2017-07-04 12:08:51

Проблема с ячейкой HTML-таблицы

ответ

Смежные вопросы