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>

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

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

Comments

[Alberto32]

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