0

I am brand new to front end HTML and trying to construct a table identical to the below example whereby I have cell numbering identical to this.the objective

My code as it stands when rendered looks like this. enter image description here

I am struggling to figure out how I achieve the cell numbering. I have done a few things but it looks out of sorts. Is this done via 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>
5
  • The numbers would likely just be another column which your code appears to be missing Commented Feb 6, 2017 at 12:36
  • Go look up what rowspan/colspan do, and then use an extra cell for the numbers.
    – C3roe
    Commented Feb 6, 2017 at 12:36
  • I think the keyword you are looking for is colspan. Use it in the first row for the first element and add an additional column for all other rows.
    – Sirko
    Commented Feb 6, 2017 at 12:36
  • I suggest just add one more column to it Commented Feb 6, 2017 at 12:39
  • i have tried adding another TD, it skews to the other side Commented Feb 6, 2017 at 12:41

3 Answers 3

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

You can use this and add 1 column to it and you can get what you want.

0

You can use Bootstrap and make it responsive as well, if you need more info search here, example:

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

You can use colspan to do it.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.