CODEWITHSUNDEEP
htmlhtml-tableborderdivider
Lorber
Lorber

Reputation: 91

Create table with only bottom border in HTML

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!

Upvotes: 7

Views: 71409

Answers (5)

Martin2904
Martin2904

Reputation: 333

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>

Upvotes: 19

bytanyar
bytanyar

Reputation: 27

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

Upvotes: 0

haltersweb
haltersweb

Reputation: 3139

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>

Upvotes: 4

AzizurRahamanCA
AzizurRahamanCA

Reputation: 170

you could use this 

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

Upvotes: 1

bytanyar
bytanyar

Reputation: 27

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.

Upvotes: 1

Related Questions