Tables, CSS & Fonts

Sean Preston
What you’ll learn today…
1. You will be introduced to HTML Tables and CSS.

2. You will learn to utilise CSS to apply custom styles and improve the
UI of your website.

3. Learn how to implement external font libraries (and icon fonts) into
your website to improve typography.
HTML Tables
Introduction to HTML Tables
• Tables allow us to display tabular data on our website (data arranged
into rows and columns).

• Tables can be used to display schedules, statistics, lists of users,

pricing/rates etc.

• A table cell could contain a variety of data including text, numbers,

links and images.
Basic HTML code for a table
• At it’s most basic, we can create a table using just four elements:

• <table> … </table> - The main table wrapper

• <tr> … </tr> - Table row
• <th> … </th> - Table header
• <td> … </td> - Table cell data
Basic HTML table structure
No column element?
• HTML tables don’t need a column element, instead the number of
columns is defined by the number of <td>…</td> elements in each
row.

• Therefore, in most cases you will always want to make sure you have
the same number of <td>…</td> elements in each row.
Let’s look at some code…
<table> • Here we can see the wrapper
<tr>
<th>Name</th> <table> … </table> element.
<th>Age</th>
<th>Language</th> • All code for our table must be
</tr> kept inside these two elements.
<tr>
<td>Fred</td>
<td>30</td>
<td>English</td>
</tr>
</table>
Let’s look at some code…
<table> • Now, we’ve added two sets of
<tr>
<th>Name</th> <tr> … </tr> tags. These
<th>Age</th> represent a row in our table.
<th>Language</th>
</tr>
• In this table the first row
<tr>
contains our headings. The
<td>Fred</td>
second row contains one set of
<td>30</td>
data.
<td>English</td>
</tr>
</table>
Let’s look at some code…
<table> • Now, we’ve used <th> … </th>
<tr>
<th>Name</th> tags to define our table
<th>Age</th> headers.
<th>Language</th>
</tr>
• In this case the headers are
<tr>
Name, Age and Language.
<td>Fred</td>
<td>30</td>
<td>English</td>
</tr>
</table>
Let’s look at some code…
<table> • Similar to our headers, we use
<tr>
<th>Name</th> <td> … </td> tags to define
<th>Age</th> individual pieces of data.
<th>Language</th>
</tr>
• These can also be seen as
<tr>
columns.
<td>Fred</td>
<td>30</td>
<td>English</td>
</tr>
</table>
The result…
<table>
<tr> Name Age Langauge
<th>Name</th>
<th>Age</th> Fred 30 English

<th>Language</th>
</tr>
<tr>
<td>Fred</td>
<td>30</td>
<td>English</td>
</tr>
</table>
Column and Row Spans
• There might be some cases where you want to present one cell over
multiple rows or columns.

• You could see this as being similar to the “Merge Cells” tool in MS
Word and Excel.

• To allow a cell to go over multiple columns we use the attribute

colspan=“2”. This would make the element go over 2 columns.

• For rows it’s the same but instead we use rowspan=“2”.

HTML5 Tables
• Three new table elements were added to the HTML5 specification
when it was released:

• <thead> … </thead> - The table header

• <tbody> … </tbody> - The main table body
• <tfoot> … </tfoot> - The table footer

• These additional elements work in conjunction with the elements

we’ve already covered.
HTML5 Tables – why?
• These new elements allow us to group multiple elements together
under one single element.

• For example, a table could quite possibly have two rows of headings.
Before the new HTML5 elements, these headings were completely
disconnected.

• The new elements resolve this issue. Let’s see it in action…

 <table>
Before and after… <thead>
<tr>
<th>Name</th>
<table> <th>Age</th>
<tr>
<th>Name</th> <th>Language</th>
<th>Age</th> </tr>
<th>Language</th> </thead>
</tr> <tbody>
<tr> <tr>
<td>Fred</td> <td>Fred</td>
<td>30</td> <td>30</td>
<td>English</td> <td>English</td>
</tr> </tr>
</table> </tbody>
</table>
CSS
Introduction to CSS
• CSS stands for “Cascading Style sheets”.

• CSS is used for describing the presentation of a HTML document.

• For example, we could use CSS to change the colour of text elements
or to position an image on the right side of the page.
CSS History
• CSS 1 was first introduced in 1996.

• CSS 2 was published in 1998.

• CSS 1 and CSS 1 were single specifications. CSS 3 switched to a

module specification. This means that modules are released in stages
rather than as one specification.

• As a result, CSS 3 is still in development. Many modules have been

released, some are still a “working draft”.
CSS Advantages
• Increased layout controls – HTML attributes offer very little in the
means of layout styling.

• Less work – Normally a single CSS stylesheet is used for the entire
website. Therefore, we only have to make the majority of style
changes once.

• Reliable browser support – As CSS3 matures, browser support is

always increasing. You should use http://caniuse.com to be sure!
The CSS Process
1. You first create a HTML page with multiple HTML elements using IDs
and Classes (more on this in a moment).

2. Create a new CSS document and write styles for the elements
created in step 1.

3. Attach the CSS document to the HTML page. This will apply the
styles to the page.
A note on IDs and Classes
• The two main ways to attach styles to elements on are page is to use
IDs and Classes.

• IDs should be unique (no ID should be used by more than one

element on a page).

• Classes can be used on multiple elements.

<div id=“address”></div> <div class=“phone”></div>

ID and Class Selectors
• In CSS (and JavaScript) we select IDs using a hash character and
classes using a dot.

#address { color: red; }

.phone { color: red; }

Element Selectors
• While we can select an element using an ID or Class, we can also
select the element itself.

div { color: red; }

• This would apply the style to all div elements on the page.
CSS Comments
• In CSS we can add comments to our code like so…

/* This is a comment */

• Comment can be multiple lines like so…

/*
This is a comment
*/
Including CSS Styles - Inline
• We can include CSS styles in our HTML by placing them within the
HTML tags <style> … </style> tags like so…

<style>
div {
color: red;
}
</style>
Including CSS Styles – External files
• We can also include external CSS files. You would do this inside your
<head> … </head> tags. Like so….

<head>
<link rel=“stylesheet” href=“./styles.css”>
</head>

• So, which of the two options do you think is best?

CSS External files vs Inline Style tags
• Placing CSS styles inside an external file is preferred.

• Very rarely should you place CSS styles inside the <style>…</style>
tags.

• An external file makes development far easier as it’s likely your CSS
file will become quite large over time.
CSS Style Structure
• This is the selector.
#address {
color: red; • In this instance we’re selecting
font-family: Roboto; any element with the ID
font-size: 14px; “address”.
}
CSS Style Structure
• These are the styles being
#address { applied to the element.
color: red;
font-family: Roboto; • Color will set the text colour to
font-size: 14px; Red.
}
• Font family and font style will
stylise the typography.
Basic CSS Styles
Basic CSS Styles - Fonts
• Font-family
• Specify one or more fonts (comma separated).

• Font-size
• This is the size of the text. It can be represented using pixels (px) or use relative
values such as %, em or rem.
• It is possible to also use absolute keywords such as “small”, “medium” or “large”.
However, this is not recommended.

• Font-weight
• This is the weight applied to fonts. For example 100 is super-thin whereas 900 is
super-bold. The range of values depend upon the font being used.
Basic CSS Styles – Fonts Continued
• Font-style
• Normal, italic etc
Basic CSS Styles - Colours
• Colours can be used in a range of different styles. For example, they
can be used by the “color” style to set a text colour. Or, by
“background-color” to apply a background colour to the element.

• We can set a colour using:

• Name – e.g. “red”
• Hex – e.g. “#000000” (can be shortened to “#000”)
• RGB – e.g. “rgb(102, 102, 102)”
Basic CSS Styles - Backgrounds
• Background-image
• Allows us to set the background of an element to an image.

• Background-repeat
• Allow an image to repeat on the x and y axis.

• Background-position
• We can set the position of the background image (e.g. left, center, right, top,
bottom)
Basic CSS Styles - Text
• Line-height
• Adds/removes spacing before and after each line.

• Text-indent
• Indent the first line of text.

• Text-align
• Align the text left, right, center or justify.

• Text-transform
• None, capitalize, lowercase, uppercase
Basic CSS Styles - Text
• Text-shadow
• Adds a drop shadow to text.
Basic CSS Styles - Misc
• Opacity
• Add an opacity to the element. The element still exist on the page, it just
becomes transparent.

• Visibility
• Hide an element. This is similar to opacity but when set to “hidden” the
element is actually removed from the page.
Basic CSS Styles - Display
• Block
• Makes the element full width.

• Inline
• Makes the element inline.

• None
• Hides the element.
Chrome Developer
Tools
Demonstration
External Fonts & Icon
Fonts
Including Custom Fonts
• There are many ways in which we can add fonts to the websites we
create.

• We can add them manually to our websites file structure (and we’ll
look at this later in the module). This is ideal for custom fonts.

• However, there is another way! We can include fonts using a range of

external libraries.
Hosted vs non-hosted Fonts
• Some font providers are “hosted”. This means we don’t need to
actually download any fonts into our websites file structure. Instead,
we just include them like we would any other CSS file from an
external source.

• Some fonts however don’t provide this service and you need to
download them and include them in a more traditional way.
Google Fonts
• Large libraries of fonts now exist that we can use in our websites. No
longer are we restricted to system fonts (which often look a little
boring!).

• Google Fonts is one of the largest providers of such a service. If you

have access to a Adobe Creative Cloud subscription then TypeKit is
also a great alternative!

• Google Fonts allows us to easily add a range of open source fonts to

our website. We can then apply those fonts using CSS.
Icon Fonts
• When we mention “fonts”. You’re probably thinking of common fonts
like Arial, Roboto and Open Sans.

• But, we can actually use fonts as a great way of storing icons. Because
they’re a font we can use them at any size and they’re quick to load in
the users browser.

• Obviously, there are some limitations. For example, the entire icon
needs to be the same colour (in the same way that each character in a
standard font needs to be a colour).
Font Awesome
• First released on December 7th 2017, Font Awesome is an icon font
library this is … awesome!

• It was first created to be included in the Bootstap library (more on this

in a later class). But, Font Awesome has now become incredibly
popular outside of Bootstrap.

• It allows us access to over 1,513 free icons and 5,097 pro icons. Their
pro package costs between $60 - $99 annually. However, for most
websites the free package is sufficient.
Fontello
• Fontello is an online platform that allows you to build your own icon
font.

• Fontello allows you to choose which icons you need from a range of
different icon font packages (including Font Awesome).

• Unlike Font Awesome, Fontello is not hosted and you need to

download the font and include it manually in your website.
 Once you have
completed the activities
in a lesson you should
work on your assignment

Activities