CODEWITHSUNDEEP
javascriptcsshtml
encrypt
encrypt

Reputation: 277

Add css to format table into grid

So in my php file, the groups are listed from top-bottom. I want to list them from left-right, and then like start the next row, so they are all in a grid format displayed nicely across the page. How can i add html/css to do this?this is what I have right now 

Object.keys(cats).forEach(function(Group) {
      let html = '';

      // Append the 'category' header

      html = '<tr>';
      html += '<td><h1>'+"Group"+ Group+'</h1></td>';
      html += '</tr>';
      $('table').append(html);


      // Loop through the results for this 'category'
      cats[Group].forEach(function(element) {

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html = '<tr>';
        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';
        html += '</tr>';
        $('table').append(html);

      });

    });

    });

    </script>

    </body>

    <table> </table>

Upvotes: 1

Views: 728

Answers (4)

Sarah
Sarah

Reputation: 2003

As I was suggesting in my comments you could create a table for each group (in your for loop) and append them to a div with id='tables_container'.

Then in CSS set the width of the tables to be 33% and float them left as follows:

CSS

table{
  width: 33%;
  float: left;
}

JavaScript/JQuery

Object.keys(cats).forEach(function(Group) {
      let html = '';

      //add the table opening tag to the html variable
      html += '<table>';
      //Append the 'category' header
      html += '<tr>';
      html += '<td><h1>'+"Group"+ Group+'</h1></td>';
      html += '</tr>';

      // Loop through the results for this 'category'
      cats[Group].forEach(function(element) {   
        var names = element.names;
        var img = "<img src=' " + randomImage+ " ' />";
        html += '<tr>';
        html += '<td><p>' + names + '</p></td> ';
        html += '<td><p>' + img + '</p></td>';
        html += '</tr>';
      });
      //add the table closing tag to the html variable
      html += '</table>'; 
      //now that our html variable contains the table html for this group we append it to the tables_container
      $('#tables_container').append(html);
});

HTML

Instead of having <table> in your html document you would have a container for the tables.

<div id="tables_container"></div>

Upvotes: 3

elbrant
elbrant

Reputation: 791

You will want to tweek this - I used an example from W3Schools. It will give you 3 columns wrapped together into one row. The columns will collapse into one with the items stacked on top of eachother if the screen is too small for all three columns. (run the snippet and see it in action) I set this up with cards, which you could eliminate (should you choose to do so). Adjust it as neccessary, then set up the corresponding html elements in your javascript. Hope this helps!

<style>
* { box-sizing: border-box; }

.column {
    float: left;
    width: 30%;
    padding: 0 10px;
    }
 
 .row { margin: 0 10px; }
 
.row:after {
    content: "";
    display: table;
    clear: both;
    }
    
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    text-align: center;
    background-color: #F1F1F1;
    }
    
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        display: block;
        margin-bottom: 15px;
    }
}        
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<h2>Responsive Column Cards</h2>
<p>Resize the browser window to see the effect.</p>

<div class="row"><!-- stretches across page -->
    <div class="column"> <!-- 1 of 3 -->
        <div class="card">
            <h1>Group 1</h1>
            <p><img src =""> name</p>
        </div>
    </div>
    
    <div class="column"> <!-- 2 of 3 -->
        <div class="card">
            <h1>Group 2</h1>
            <p><img src =""> name</p>
        </div>
    </div> 
    
    <div class="column"> <!-- 3 of 3 -->
        <div class="card">
            <h1>Group 3</h1>
            <p><img src =""> name</p>
        </div>
    </div>    

</div> <!-- end of row -->

</body>
</html>

Upvotes: 2

sridhar
sridhar

Reputation: 622

You can do something like this.

<table>
  <tr>
    <td>
      <h3>
        Group1
      </h3>
    </td>
  </tr>
  <tr>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
</tr>
  <tr>
    <td>
      <h3>
        Group2
      </h3>
    </td>
  </tr>
  <tr>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table>
      <tr>
        <td>Image</td>
      </tr>
      <tr>
        <td>
          Text
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>

Upvotes: 1

Ramesh Navi
Ramesh Navi

Reputation: 773

First of all, your heading column in the first row should span to 2 to match the second row. Is this what you are looking? Run the snippet.

table tr > *{
  display: block;
}
table tr {
  display: table-cell;
}
<table>
  <tr>
    <td colspan="2"><h1>Group 1</h1></td>
  </tr>
  <tr>
    <td><p>Name 1</p></td>
    <td><p>IMG</p></td>
  </tr>
</table>

Upvotes: 1

Related Questions