Web Development Lesson 4 - Tables

Table Content and Structure

Objective

In this section, we'll create a table to present the statistics for the Colombian Football team. You will learn how to structure a table in rows and columns and to assign cells as headings.

Setup

Create a file in Visual Studio Code in your folder (not under 'project') and name it ‘tables.html’.
Type ‘html’ and select ‘html:5’ to add standard HTML code.

Structure

A table has columns and rows. We'll create a table with the following structure

Name	Surname	Nationality	Age	Position
David	Ospina Ramírez	Colombia	33	Portero

To start, add a <table> tag to the <body> of your code.

<table>

</table>

Now we add the table head and body.

<table>
  <thead>
    
  </thead>
  <tbody>
    
  </tbody>
</table>

As you might expect, <thead> contains the headings and <tbody> contains the data.
You don't need to use these in every table, but they are useful if you want to change the data dynamically using javascript so it's good to get used to using them.
This assumes you want your headings along the top, but if you choose to put your headings in the first column, that's a good time to not use <thead> and <tbody>.
Let's add the heading row with five heading cells.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th>Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

<tr> signifies the table row.
<th> signifies a table heading cell.
Run the code to see the results. Right now, there is no border, but the headings are automatically bold.
Let's add a line of data.

<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>
  </tbody>
</table>

You can see that the data row follows the same structure as the header row, but the cells are labelled <td> (table data) instead of <th> (table header).
Complete 3 more lines yourself using the following data.

Name	Surname	Nationality	Age	Position
David	Ospina Ramírez	Colombia	33	Portero
Carlos	Eccehomo Cuesta Figueroa	Colombia	22	Defensa
Juan Guillermo	Cuadrado Bello	Colombia	33	Centrocampista
Radamel Falcao	García Zárate	Colombia	35	Delantero

How did you go? Does the table look right?
Notice that the width of each column changed to fit the width of the largest cell (longest text). Tables are clever like that.
This will be more obvious when we show the borders.

Borders

To see the structure of the table directly, we need to add borders using CSS.
Link 'style.css' in the <head> by typing 'link' on a new line and selecting 'link:css'.
Create 'style.css' and add the following CSS code to display the border.

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

Notice that we have applied the style rules to both <th> and <td> by separating them with a comma.
Now you can clearly see the structure of the table.
For instance, you can see that in data cells, text is aligned to the left by default, while in header cells, text is center aligned.
You will also notice that the left-aligned text is right on the edge of the cell, which is is harder to read. We'll fix this in the next section.

Final Code

Next: Padding

Tech School

Table of Contents

Web Development Lesson 4 - Tables

Table Content and Structure

Objective

Setup

Structure

Borders

Final Code

Tech School

User Tools

Site Tools

Table of Contents

Web Development Lesson 4 - Tables

Table Content and Structure

Objective

Setup

Structure

Borders

Final Code

Page Tools