IT6012 Web Fundamentals

Tables
Tables
• HTML tables give us a way to represent data in
columns and rows like a spreadsheet
Table structure
• Tables are created using a combination of the
following tags
• <table> - this element is used to create the table
• <tr> - this is used to create a row of data within a
table
• <td> - this represents a cell of data within a table
• <th> - similar to <td> but used to represent the
headings in the table
Tutorial 3
• Create a page called tickets.html. Enter the html shown and
test the page in the browser
Cell Spacing and Cell Padding Attribute:
• Cell Spacing: Cell spacing is the space between each
cell, by default the space is set to 2 pixels.

• Cell Padding: Cell padding is the space between

cell edges and cell content, by default the
space is set to 2 pixels.
Quick Activity:
Use cell padding and cell spacing attribute and
find out thus it works with <table> tag or
<th>,<td> tag or both tags.
HTML5-tags for multimedia
Audio: Supported formats: mp3, wav, ogg
<audio> autoplay controls src=“Mozart.mp3“
</audio>
Video: Supported formats: mp4, WebM, ogg
(ogv)
<video autoplay controls src=“small.webm" width=
"200" height="300"></video>

• For other multimedia formats (wma,

fla/flv, avi, mov etc) web browsers need
special extensions (Plugins)
Lab 6
Add a table to your HouseBuilder site that contains the list of topics in
column and row format as shown:
Lab 6
• Now complete your HouseBuilder website, creating additional pages with
pictures and hyperlinks from each of the 8 topics listed on the home page
to your new pages. Required texts and images are in Moodle – there are 2
images for some pages.
Lab 7 Polytechnic Restaurant
• Now take what you have learned about HTML and create a
website for a Polytechnic restaurant
• Your website should contain
• Home Page, Menu, About us, Contact us
• Add a background colour.
• A list of meals available with use of fonts, headings etc.
• Include images of meals and hyperlinks to internet
resources for these foods
• A table listing prices
• The contact page should include an address and hyperlinked
email
Unit Summary
In this unit we have discussed the following topics

• Web page basic structure

• Basic text output and formatting
• Links
• Navigation
• Images
• Tables