I want to make a whole line of a sentence HTML

Asked 2 years ago, Updated 2 years ago, 144 views

module.exports = {
    HTML:function(title, board, control){
      return `
      <!DOCTYPE html>
      <html>
          <head>
            <title>${title}</title>
            <meta charset="utf-8">
            <style type="text/css">
          ul.board, ol.board {
            list-style: none;
            margin: 0px;
            padding: 5px;
        }
        form {
          display: inline;
        }
        </style>
          </head>
          <body>
              <div id="board">
              <table border="3">
                      <thead>
                          <th>Title</th>
                          <th>Author</th>
                          <th>Date</th>
                          <th>Views</th>
                      </thead>
                      <tbody>
                          ${board}
                      </tbody>
                  </table>
                  ${control}
              </div>
          </body>
      </html>`;
    },board:function(lifeboards){
      var board = ``;
      var i = 0;
        while(i < lifeboards.length){
          var board = board +`<th><div style="text-align:left"><ul class="board"><li><a href="/?id=${lifeboards[i].id}">${i+1}. ${lifeboards[i].title}</a></li>
          <th><div style="text-align:left"><ul class="board"><li>${lifeboards[i].writer}</li>
          <th><div style="text-align:left"><ul class="board"><li>${lifeboards[i].day}</li>
          <th><div style="text-align:left"><ul class="board"><li>${lifeboards[i].see}</li>
          `;
          i = i + 1;

        }
        board = board + `</ul></div></th><br>`;
      return board;
      }
  }

This is the code Imported information from lifeboards from db.query from the main (it's a data bass)
And I'd like to change the entire while door to the table shown in the picture below.
I'm trying to make sure that the title, author, date, and number of views come in line. <br> also <p> doesn't work
Can you help me?

I'm still... I'm sorry for the immature question because I'm a student.

java node.js module javascript html

2022-09-22 15:26

1 Answers

The reason why "line wrap" is not being followed is that the basic structure of the table tag is not being followed.

<table>
    < thead > <! -- usually one at thead tr million. -- >
        <tr>
            < th > th and < > < td are under! -- thead >. -- mainly writing can be, but th
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        < tr > < A joule is in the table! -- table row >. -- i.e. configure as a tag tr
            < td > td and < > < td, or in tags! -- tr table >. -- should only tags data
            < td > td and < > < force rendering is so! -- others are ignored -- >
            < br > <! - So this is that it is -- >
            < td > foo < br > bar td and < > <! -- instead of / -- With this in the th td >.
        Tr and < > <! -- open -- closes the tag tr > to start a new line, now.
        < tr > < >. -- becoming "unwrap" be! -- Open a new tr
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Therefore, the anonymous function assigned to the board should look roughly like this.

board: function (lifeboards) {
    var board = ``;
    For (i = 0; i < lifeboards.length; i++) { If you write for // while, you need 3 lines, but if you write for, you end up with 1 line.
        vararticle = lifeboards[i]; // Repeated targets are better subtracted as variables.
        The key is to use board += '<tr>'; // tr.
        board += `<td><a href="/?id=${article.id}">${i+1}. ${article.title}</a></td>`;
        board += `<td>${article.writer}</td>`;
        board += `<td>${article.day}</td>`;
        board += `<td>${article.see}</td>`;
        board += '</tr>'; // up to this point, the tr markup for one lifeboard array element
    } // If you come this far, mark up the tr tag of the elements in all lifeboards arrays
    Return board; // Return the markup created so far and it's over.
}


2022-09-22 15:26

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.