In this activity we'll adjust the spacing between cells and within cells to make it more readable.

• Continue using 'tables.html' and 'style.css' with your code from the previous activity. It should look like this.

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th>Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>David</td>
      <td>Ospina Ramírez</td>
      <td>Colombia</td>
      <td>33</td>
      <td>Portero</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>Eccehomo Cuesta Figueroa</td>
      <td>Colombia</td>
      <td>22</td>
      <td>Defensa</td>
    </tr>
    <tr>
      <td>Juan Guillermo</td>
      <td>Cuadrado Bello</td>
      <td>Colombia</td>
      <td>33</td>
      <td>Centrocampista</td>
    </tr>
    <tr>
      <td>Radamel Falcao</td>
      <td>García Zárate</td>
      <td>Colombia</td>
      <td>35</td>
      <td>Delantero</td>
    </tr>
  </tbody>
</table>

CSS

td, th {
  border-width: 1px;
  border-style: solid;
}

• Padding is the space between the boundary of an element (in this case the table cell) and its content.
• Let's add 10 pixels around each side of the text in data cells.
• Because we only want to apply the padding to the data cells and not the header cells, we have to create a new target in the CSS code.

td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

• This should be a lot more readable.

• Personally, I don't like the space between the table cells, so I always remove it.
• Apply the border-collapse property to the <table> element.

table {
  border-collapse: collapse;
}

• Does that look better?

Next: Selectors