Horje
How to create HTML Table Horizontal Dividers | HTML Table Styling Code
How to create HTML Table Horizontal Dividers

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.


Full Example of HTML Table Horizontal Dividers

Add the border-bottom property to all tr elements to get horizontal dividers:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to the tr elements for horizontal dividers:</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
  </tr>
</table>

</body>
</html>

Output should be:

Full Example of HTML Table Horizontal Dividers



Read Full::
HTML Table Styling Code
Category:
HTML Code
Sub Category:
HTML Table Styling Code
Uploaded:
10 months ago
Uploaded by:
Admin
Views:
1

Related Articles
What is HTML Table Styling HTML Table Styling Code
How to create HTML Table - Zebra Stripes HTML Table Styling Code
How to create HTML Table - Vertical Zebra Stripes HTML Table Styling Code
How to create HTML Table Combine Vertical and Horizontal Zebra Stripes HTML Table Styling Code
How to create HTML Table Horizontal Dividers HTML Table Styling Code
How to create HTML Hoverable Table HTML Table Styling Code

Single Articles
Full Example of HTML Table Horizontal Dividers

Share on: