Web Development Lesson 3 - Tablas

In this activity we'll adjust the spacing between cells and within cells to make it more readable. We'll also look at various display options used to position elements in relation to each other.

• Continue using your jsfiddle 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 element (in this case the text) and the border.
• 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;
}

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

table {
  border-collapse: collapse;
}

• Every element in HTML is either block or inline, which affects how it and the elements around it appear on the page.
• block elements stack on top of each other. Paragraphs and headings are block elements.
• inline elements line up side to side in a single row. Text elements like <span>, <strong> and <em> are inline elements.
• Let's look at the difference. By default, table cells are inline elements (they are arranged side by side), but we can force them to be block elements using the following code in the td target.

display: block;

• What happens when you run the code? Do all the table cells stack on top of each other?
• There is another option you can use. Try changing block to none.

display: none;

• What happened? The data cells should disappear.
• This option isn't much use on its own as noone would ever see the content. It's only useful when using Javascript to change an element's visibility based on content or user action.
• To restore the table, remove the code display: none;

Next: Selectors