HTML border only outside the table

Question

How can I put border only around of my external table? I don't need in every <tr> but just around. I tried to use css but in a Joomla article it is not easy. Thanks for help.

 <table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;">
      <tbody>
        <tr>
          <td>aasda</td>
          <td>asfasf<a title="Ep. 1 Sono Reika"> </a></td>
          <td width="60%">asfasfasfasf</td>
          <td>blabla</td>
        </tr>
        <tr>
          <td>saf</td>
          <td><a title="Ep. 2 La grazia"> </a>asf</td>
          <td width='"70%'>asf</td>
          <td rowspan="9" width="30%">
            <p>blabla</p>
            <p>blalbalbalalb</p>
          </td>
        </tr>
        <tr>
          <td>asf</td>
          <td><a title="Ep. 2 La grazia"> </a>asf</td>
          <td>asf</td>
        </tr>
        <tr>
          <td>asf</td>
          <td><a title="Ep. 2 La grazia"> </a>asf</td>
          <td width='"70%'>asf</td>
        </tr>
      </tbody>
    </table>

Unveiling

Answer 1

You need to add the property border:1px solid red to your table

<table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;border:1px red solid;">
  <tbody>
    <tr>
      <td>aasda</td>
      <td>asfasf<a title="Ep. 1 Sono Reika"> </a></td>
      <td width="60%">asfasfasfasf</td>
      <td>blabla</td>
    </tr>
    <tr>
      <td>saf</td>
      <td><a title="Ep. 2 La grazia"> </a>asf</td>
      <td width='"70%'>asf</td>
      <td rowspan="9" width="30%">
        <p>blabla</p>
        <p>blalbalbalalb</p>
      </td>
    </tr>
    <tr>
      <td>asf</td>
      <td><a title="Ep. 2 La grazia"> </a>asf</td>
      <td>asf</td>
    </tr>
    <tr>
      <td>asf</td>
      <td><a title="Ep. 2 La grazia"> </a>asf</td>
      <td width='"70%'>asf</td>
    </tr>
  </tbody>
</table>
<p></p>

Klong

Thank you very much!! I don't know why, but I didn't think in this way. It works perfectly, thanks again! – Unveiling

Answer 2

Table with border outside

table {
  border: 1px solid black;
  border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

---

Table with border outside and in rows

table, tr {
  border: 1px solid black;
  border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

---

Could go on and create for all cases but you get the point.

In CSS we specify what we want to have border.

We can do apply it to zero or more of the following elements, depending on what we want the end result to look like

• <table> (table)
• <tr> (table row)
• <td> (table data)
• <th> (table heading)

Fatal

Answer 3

Not sure if I understood correctly, but solution to my problem is

table {
  border: 1px solid;
}

instead of any of

table th, table td {
  border: 1px solid;
}

that way you will only get an outside border for the table, instead of every row or cell, source: https://www.w3schools.com/css/css_table.asp

Morgan