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!

Flatt

I would suggest you first inspect the code/css of the staff directory that you are trying to copy and see how they do it. Then try your hand at a solution. If you are still stuck post your code here and we can help you. – Bituminous

Thanks for your help, but I need it in HTML only. I can't use CSS or anything other than HTML. – Flatt

Can you use inline styles within your HTML? – Bituminous

I'm guessing I can't because I tried Random Developer's code below and it just kept it as a regular boxed in table format. Is that not an instance of inline styles? – Flatt

You will need more inline styling to support. Let me mark something up for you. – Bituminous

I have marked up a sample for you using inline styles. As you see many of the different elements need styling to support each other. – Bituminous

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>

Platas

Thanks for your help, but I need it in HTML only. I can't use CSS or anything other than HTML. – Flatt

just added the html-only version. – Platas

this really needs to be selected as the correct answer @Flatt – Delagarza

This is just inline-css, but still css. The only way I see to achieve this with pure HTML is to create an extra <tr><td> with height 1 and bgcolor in the <td>. – Sixgun

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>

Bituminous

Answer 3

I believe you want to remove the border from your table.directory tr and add it to the tbody element.

That will give you a border just between each section.

Juvenile

Ah I guess I'm not being clear here, but I just want the grey lines that's below every line of text in the table. I can't seem to be able to recreate it in HTML, only regular, all sides of a line boxed in tables. Do you know how to do that? – Flatt

you could insert a divider image between each row: – Juvenile

Are you wanting a horizontal rule between lines? Such as: – Juvenile

Answer 4

you could use this

<table style="border-bottom: 1px solid black">
  <tr>
               <td>Someone</td>
       </tr>
  </table>

Lucinalucinda

Hmm, I see it works here in the code snippet and I appreciate that. But when I try to put it in the context of the code, it doesn't change anything. It's just still a regular table, boxed on all sides. Any thoughts? – Flatt

hmm, it should change in the context of the code too – Lucinalucinda

I tried even posting your exact code outside of everything else and it's just a regular table box. – Flatt

Is this considered an inline style? Perhaps I can't use those. – Flatt

Answer 5

<table border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td>Dean</td>
    </tr>
    <tr>
      <td><hr /></td>
    </tr>
    <tr>
      <td>Jane</td>
    </tr>
    <tr>
      <td><hr /></td>
    </tr>
    <tr>
      <td>Scott</td>
    </tr>
    <tr>
      <td><hr /></td>
    </tr>
    
  </tbody>
</table>

Juvenile