Om Mandarwan Om Mandarwan - 2 months ago 7
CSS Question

How to set border on tables

Suppose I have a

table
element with good amounts of data.



table {
background-color: skyblue;
width: 100%;
margin: auto;
text-align: center;
}

<table>
<tbody>
<tr>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
</tr>
<tr>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
</tr>
<tr>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
</tr>
<tr>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
</tr>
<tr>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
</tr>
<tr>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
<td>My Name</td>
</tr>
</tbody>
</table>





What would be the best way to set a border of
border-style: dashed; border-color: black; border-size: 3px;
on each even
td
.

Please explain this. Thanks in advance.

Answer

I prefer to use HTML classes in this case. All you have to do is set a class of randomName and style it in the stylesheet.

You can also use inline css, but I DO NOT prefer this.

table {
  background-color: skyblue;
  width: 100%;
  margin: auto;
  text-align: center;
}
.randomName {
  border-style: dashed;
  border-color: black;
  border-size: 3px;
}
<table>
  <tbody>
    <tr>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
    </tr>
    <tr>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
      <td>My Name</td>
      <td class="randomName">My Name</td>
    </tr>
  </tbody>
</table>

Comments