Pset7 Table HTML and CSS formatting

Question

I'm working on pset7 porfolio, and I am trying to neatly style the table that shows the owned stocks. I can't seem to figure out the formatting/ ordering of the styling. I looked at w3's css styling pages, but I still can't figure it out. Here is my current code:

     <table border = 1 px; padding 5 px style = "border-collapse:collapse">
     <?php

    foreach ($positions as $position)
    {
        print("<tr>");
        print("<td>{$position["symbol"]}</td>");
        print("<td>{$position["shares"]}</td>");
        print("<td>{$position["price"]}</td>");
        print("</tr>");
    }

?>
</table>

I want to have a nice wide table, with each cell having a nice amount of space, and nice thin borders.

Also I don't understand how to pass in things with render. In this line, render("portfolio.php", ["positions" => $positions, "title" => "Portfolio"]);, what is "positions"? Is it a variable? If it is, why no dollar sign?

Thanks!

David

Answer 1

The render() function takes two arguments, the first is a string that indicates the name of the template, and the second is an array of key-value pairs.

In this case "positions" is a string that represents the key and $positions is the value. Note that the value can be any kind of type, an integer, float, string, etc... or in this case is another array.

Maybe this would be more clear written this way:

$myArray = [
    "tittle" => "Portfolio",
    "positions" => $positions,
    ];

render("portfolio.php", $myArray);

And about table you need to specify the look you want to give to the table, otherwise is hard to give you an answer, just an example using bootstrap

http://codepen.io/wallek876/pen/eNLywV

html:

<div class="container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>SYMBOL</th>
        <th>SHARES</th>
        <th>RRICE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Symbol</td>
        <td>20</td>
        <td>15.60</td>
      </tr>
      <tr>
        <td>Symbol</td>
        <td>20</td>
        <td>15.60</td>
      </tr>
    </tbody>
  </table>
</div>

css:

table {
  margin-top: 20px;
  border: 1px solid gray;
}

th {
  color: white;
  text-align: center;
}

td {
  text-align: center;
}

thead {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7cc+0,0057d1+100 */

  background: #00b7cc;
  /* Old browsers */

  background: -moz-linear-gradient(top, #00b7cc 0%, #0057d1 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00b7cc), color-stop(100%, #0057d1));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #00b7cc 0%, #0057d1 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #00b7cc 0%, #0057d1 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #00b7cc 0%, #0057d1 100%);
  /* IE10+ */

  background: linear-gradient(to bottom, #00b7cc 0%, #0057d1 100%);
  /* W3C */

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00b7cc', endColorstr='#0057d1', GradientType=0);
  /* IE6-9 */
}

tbody tr:hover {
  background-color: lightblue;
}

tbody tr:nth-of-type(2n+1):hover {
  background-color: lightblue;
}