在 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>

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.

Answer 4

you could use this

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

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>