HTML TABLES

31
HTML Tables

■ Tables are used to arrange data in rows and columns.

■ A table can contain any sort of information, including numbers, text elements, even
images.
■ Tables were used to create multicolumn layouts

32
HTML Tables

33
HTML Tables

■ <tr> (table row) creates a new row

■ <td> (table data) create a new column
■ <th> (table header) creates a new column.
■ <th> is used in the table header
■ The code in the picture generates a table with
3 rows and 3 columns

34
Spanning Cells

■ Cell spanning is stretching a cell to cover several rows or columns.

■ It is done by adding the colspan or rowspan attribute to the <td> or <th> tag

35
Describing table content

■ A table can have a title or description.

■ This is done using the <caption> element

36
Grouping Rows & Columns

■ A table can be separated logically into the head, body

and foot.
■ The table header is grouped under the <thead> tag
■ The table content is grouped under the <tbody> tag
■ The table footer (optional) is grouped under the <tfoot>
tag

37
Exercise

■ Write the HTML to produce the table below

38
HTML LINKS

39
HTML Links

■ Links are used to navigate from one page to another.

■ Links are created using the anchor tag (<a>)
■ The anchor text can contain any sort of information, including numbers, text
elements, even images.

40
Absolute Urls

■ Absolute URLs provide the full URL for the document starting from the root directory,
including the protocol, domain name and pathname.
■ <a ></a>

■ <img src=“C:/Users/Joe/Documents/images/house.jpg” />

■ <img src=“/home/joe/Documents/images/house.jpg” />

41
Absolute Urls

/home/jono/photos/ D:/Data/Final/Cars

42
Relative Urls

■ Relative URLs describe the pathname to a file relative to the current document. It
does not require the protocol or domain name. Relative URLs can be used when
linking to another document on your website.

■ <a ></a>

■ When moving up to a higher folder, we use ../

43
Relative Urls

Move to the photos folder starting from home/ Move to the Cars file starting from Data/
=> jono/photos/ => Final/Cars

44
Relative Urls

../
../
../

../
../

Move to the lib folder starting from photos/ Move to the Cars file starting from Con/
=> ../../Data/Final/Cars
=> ../../../usr/lib/

45
Absolute Urls vs Relative Urls

Where is
Ublock ?

46
Absolute Urls vs Relative Urls

Where is
Ublock ?

47
Absolute/Relative Urls Exercise

■ Use Absolute URLs to navigate:

– To MyScript.py
– To the Images folder
– To the Data folder
■ Use Relative URLs to navigate
– To Toolbox1 from MyScript.py
– To the Data folder from Toolbox1
– To MyScript.py from the Tools folder
– To the Data folder from the Images folder

48
HTML Links Don’ts

■ Do not use “\”, instead use “/”. \ works only on Windows PCs
■ Do not start with the drive name eg.
■ Do not start with file:// eg
file://Users/kofimokome/Documents/Web_design/website/images/logo.jpeg

49
Linking withing a directory

■ If both files are in the same directory, just put the name of file in the href attribute

50
Linking to a lower directory

■ If the file is in a lower directory, add the directory name, followed by a / then the file
name

51
Linking to a lower directory

■ If the file is in a lower directory, add the directory name, followed by a / then the file
name

52
Linking to a higher directory

■ If the directory is one step higher, just ”../” followed by the file name

53
Linking to a higher directory

■ If the directory is two steps higher, just ”../../” followed by the file name

54
Linking to a specific point on a page

■ Assign a unique id to the destination element, using the id attribute

■ Add the id to the href attribute using the # symbol

55
Opening a link on a new tab

■ Add _blank to the target attribute

56
Mail and Telephone links

■ You can link to an email address using the mailto protocol

■ You can link to a number using the tel protocol

57
Exercise

■ Create index.html
■ Write the HTML
■ Add links to the recipe
and about us page
■ Note: Home is not blue

58
Exercise

■ Create recipes.html
■ Write the HTML
■ Add links to the home
and about us page
■ Note: Recipes is not blue

59
Exercise

■ Create about.html
■ Write the HTML
■ Add links to the recipe
and home page
■ Note: About Us is not
blue

60
Exercise - Hint

■ Use a table to position the elements

61