1

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

2

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;
}
5
  • Good answer! You are a smart one! :)
    – i_am_david
    Jul 22 '15 at 14:49
  • I copied code to test it out, but it gave me a header row that was plain white. I tried setting background color to blue, but it doesn't look the same. How did you make the header row look like it's bulging? Thanks!
    – i_am_david
    Jul 22 '15 at 15:39
  • @i_am_david it is a gradient, the code is all inside the thead selector in the css window, but there are plenty of tools online to create gradients for css like this colorzilla.com/gradient-editor/#00b7cc+0,0057d1+100
    – wallek876
    Jul 22 '15 at 18:02
  • The gradient isn't working. I tried making my own, still doesn't work.
    – i_am_david
    Jul 25 '15 at 19:13
  • @i_am_david i don't know what to tell you, it should work on most browsers, only thing i can do is show you a simple example with only a div with the background gradient codepen.io/wallek876/pen/OVBvwZ.
    – wallek876
    Jul 25 '15 at 22:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .