PHP echo table css

Question

I have a table that is echo'd into the page and I need each different entry seperated by so much. here's the table.

  echo '<table>';
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<td class="viewpost">First Name:' . $row['first_name'] . '</td></tr>';
    }
  if(!empty($row['last_name'])) {
      echo '<td class="viewpost">Last Name:' . $row['last_name'] . '</td></tr>';
    }
  if(!empty($row['post'])) {
      echo '<td class="viewpost1">' . $row['post'] . '</td></tr>';
    }
    }
  echo '</table>';

And the CSS

.viewpost {
    border: 1.5px solid #367588;
    background-color: #333;
    margin-bottom:25px;
}

.viewpost1 {
    border: 1.5px solid #367588;
    background-color: #333;
    margin-bottom:100px;
    margin-left:10px;
    }

And the two tables are not seperated on the page. Help

Answer 1

You forgot to open your table row tag '<tr>' .

Any html row and cells should be structured as <tr><td></td>..many cells as you want</tr> .

Since you are mainly concerned about the vertical alignment and spacing, it will better practice to apply the CSS rules on the rows not on the cells (as you can see, I moved the class from the ' td ' to the ' tr ').

  echo '<table>';
  while ($row = mysqli_fetch_array($data)) {
  if(!empty($row['first_name'])) {
      echo '<tr class="viewpost"><td>First Name:' . $row['first_name'] . '</td></tr>';
    }
  if(!empty($row['last_name'])) {
      echo '<tr class="viewpost"><td>Last Name:' . $row['last_name'] . '</td></tr>';
    }
  if(!empty($row['post'])) {
      echo '<tr class="viewpost1"><td>' . $row['post'] . '</td></tr>';
    }
    }
  echo '</table>';

And for the CSS, to define the vertical spacing you can use css property line-height . If you want the text to be aligned at the top use vertical-align:top .

.viewpost {
    border: 1.5px solid #367588;
    background-color: #333;
    margin-bottom:25px;
}

.viewpost1 {
    border: 1.5px solid #367588;
    background-color: #333;
    line-height:100px;
    vertical-align:top;
    margin-left:10px;
    }

Hope this helps!