Create table with only bottom border in HTML

Question

I'm trying to copy the Staff Directory portion part of this page from CSS, Javascript and HTML to just HTML. Most importantly, I'd love to be able to just make a table as you see here with only the bottom borders/dividers (or whatever they are called) for each line. How do I do that?

http://sps.columbia.edu/about/staff-directory

Thanks!

Edit:

I need only HTML, no CSS please. Thank you though!

Answer 1

Just use the following code-snippet and paste it in you style.css

table {
  border-collapse: collapse;
}

tr{
  border-bottom: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
  </tbody>
</table>

Without using style.css

<table style="border-collapse: collapse;">
  <tbody>
    <tr style="border-bottom: 1px solid black;">
      <td>Lorem</td>
      <td>Ipsum</td>
    </tr>
  </tbody>
</table>

Answer 2

Here's a pure HTML version with inline styles.

Notice styles like "border-collapse" on the TABLE, "border-bottom" and "line-height" on the TRs, and "width" on the TDs

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 80%; margin: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 0.85em;">
  <tbody>
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
      <td style="width: 70%; font-weight: bold;">Dean</td>
      <td style="width: 30%; text-align: right;">Joe Cool</td></tr>
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
      <td style="width: 70%; font-weight: bold;">Senior Vice Dean</td>
      <td style="width: 30%; text-align: right;">Jane Cool</td></tr>
    <tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
      <td style="width: 70%; font-weight: bold;">Vice Dean</td>
      <td style="width: 30%; text-align: right;">John Doe</td>
    </tr>
  </tbody>
</table>