Web Development Lesson 4 - Tables

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?

• Let's take a look at another tool that will help you as a developer.
• Open the menu of your browser. It's usually in the top right, but ask for help if you can't find it.
• Select 'More Tools' then 'Developer Tools'.
• This will open a panel on the bottom of your screen (Firefox) or the right of your screen (Chrome) with lots of tools that will help you understand what's going on in your page. Your browser size will be adjusted to cover the remaining area.
• If your Developer Tools hasn't opened in the 'Inspector' tab, navigate to it now.
• You'll see the entire structure of your HTML code in a collapsible format in this tab.
• If you click on any of the tags you will see details of all the applied styles in the second pane, including any errors.
• In the last pane, you'll see a box model of the element including the padding. We'll look at this in more detail in the next lesson, but for now, notice that the padding is inside the border and something called a margin is outside the border.
• Click on any <td> in your 'Inspector' pane to view those styles.
• Now click in the 'td' element of the second pane to add a new rule.
• Type color: green; and see that all the data cells of your table become green, as do some of the borders.
• This tool will allow you to view and edit your CSS rules without changing your files. It's a great place to test out the changes you want to make.
• Now try adding margin: 10px; to your 'td' element style.
• You'll see an 'i' in a circle next to the rule, telling you there's a problem. If you hover over it you'll see a message telling you that margin is not a valid property for table cells.
• Try removing the 'n' from color: green; and you'll see the rule is struck out and has a warning sign next to it. You will quickly find any typing errors if you scan your CSS rules here and changes you make here won't change your original code.

• style.css
• result

Next: Selectors