CODEWITHSUNDEEP
htmlcss
Beaner21
Beaner21

Reputation: 15

Inserting Horizontal Line element between cells

I was wondering how can I place a hr element between the top cells of the table and bottom cells. So in photo provided. There would be a horizontal line between Future Skills, Star = One Year, and Shining-Star = Five Years. And the other cells including skills, years in stars, etc. Ideally in HTML but CSS is decent as well.

<table cellspacing="36">
  <tr>
    <td>
      <h3>Future Skills</h3>
    </td>
    <td></td>
    <td>
      <h5>⭐ = One Year</h5>
    </td>
    <td></td>
    <td></td>
    <td>
      <h5>🌟 = Five year</h5>
    </td>
  </tr>
  <tr>
    <td>Frontend Coding</td>
    <td>HTML, CSS, Javascript </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
    <td>Frontend Coding</td>
    <td>HTML, CSS, Javascript </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
  </tr>
  <tr>
    <td>UX Design</td>
    <td>Figma, Illustrator, and Photoshop</td>
    <td>
      <h5>🌟</h5>
    </td>
    <td>UX Design</td>
    <td>Figma, Illustrator, and Photoshop</td>
    <td>
      <h5>🌟</h5>
    </td>
  </tr>
  <tr>
    <td>Backend Programming</td>
    <td>Python, C, and Java </td>
    <td>
      <h5>🌟🌟</h5>
    </td>

    <td>Backend Programming</td>
    <td>Python, C, and Java </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
  </tr>
</table>

Live Server Screenshot of Current Code

Upvotes: 1

Views: 48

Answers (1)

Nick Vu
Nick Vu

Reputation: 15540

hr usually go well with no-column content like paragraph (p), so in the table structure, it's not a convenient way to set separators

A table always has borders naturally. Therefore, I'd suggest you set border for each tr (table row) in CSS to achieve it instead of hr.

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid black;
}
<table cellspacing="36">
  <tr>
    <td>
      <h3>Future Skills</h3>
    </td>
    <td></td>
    <td>
      <h5>⭐ = One Year</h5>
    </td>
    <td></td>
    <td></td>
    <td>
      <h5>🌟 = Five year</h5>
    </td>
  </tr>
  <tr>
    <td>Frontend Coding</td>
    <td>HTML, CSS, Javascript </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
    <td>Frontend Coding</td>
    <td>HTML, CSS, Javascript </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
  </tr>
  <tr>
    <td>UX Design</td>
    <td>Figma, Illustrator, and Photoshop</td>
    <td>
      <h5>🌟</h5>
    </td>
    <td>UX Design</td>
    <td>Figma, Illustrator, and Photoshop</td>
    <td>
      <h5>🌟</h5>
    </td>
  </tr>
  <tr>
    <td>Backend Programming</td>
    <td>Python, C, and Java </td>
    <td>
      <h5>🌟🌟</h5>
    </td>

    <td>Backend Programming</td>
    <td>Python, C, and Java </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
  </tr>
</table>

If you still want to use hr, you can try this way

<table cellspacing="36">
  <tr>
    <td>
      <h3>Future Skills</h3>
    </td>
    <td></td>
    <td>
      <h5>⭐ = One Year</h5>
    </td>
    <td></td>
    <td></td>
    <td>
      <h5>🌟 = Five year</h5>
    </td>
  </tr>
  <tr>
    <td colspan="6">
      <hr />
    </td>
  </tr>
  <tr>
    <td>Frontend Coding</td>
    <td>HTML, CSS, Javascript </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
    <td>Frontend Coding</td>
    <td>HTML, CSS, Javascript </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
  </tr>
  <tr>
    <td colspan="6">
      <hr />
    </td>
  </tr>
  <tr>
    <td>UX Design</td>
    <td>Figma, Illustrator, and Photoshop</td>
    <td>
      <h5>🌟</h5>
    </td>
    <td>UX Design</td>
    <td>Figma, Illustrator, and Photoshop</td>
    <td>
      <h5>🌟</h5>
    </td>
  </tr>
  <tr>
    <td colspan="6">
      <hr />
    </td>
  </tr>
  <tr>
    <td>Backend Programming</td>
    <td>Python, C, and Java </td>
    <td>
      <h5>🌟🌟</h5>
    </td>

    <td>Backend Programming</td>
    <td>Python, C, and Java </td>
    <td>
      <h5>🌟🌟</h5>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions