SPC 2205 INTERNET APPLICATION

PROGRAMMING
Learning Group:
BSc SE
Lecturer: Theuri Patrick

Lesson 3
learning topics

 3.0 HTML table

 3.1 HTML blocks
 3.2 HTML id and classes
 3.3 HTML layout

3.0 HTML tables

A table is a grid of rows and columns, the intersections of which form

cells. Each cell is a distinct area, into which you can place text, graphics,
or even other tables.

HTML handles tables very well, and you can use them to organize and
present complex data to your site visitors. For example, you could display
your store’s inventory in a table.

Basic Table Structure

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr>

tag. Table rows are divided into table data with

the <td> tag.

A table row can also be divided into table headings with the <th> tag.

1|Page
Html table Spanning column

Sometimes you may need the entries in a table to

stretch across more than one column.
The colspan attribute can be used on
a <th> or <td>element and indicates
how many columns that cell should
run across (merging cells)

In the example on the right you can

see a timetable with five columns;
the first column contains the
heading for that row (the day), the
remaining four represent one-hour
time slots.

If you look at the table cell that

contains the words 'Geography' you
will see that the value of the
colspan attribute is 2, which
indicates that the cell should run
across two columns.
In the third row, 'Gym' runs across
three columns.

Html table Spanning rows You may also need entries in a

table to stretch down across more
than one row.

 The row span attribute can

be used on a<td> or<td>
element to indicate how many
rows a cell should span down
the table.
 In the example on the left
you can see that ABC Tv is
showing a movie from 6pm -
8pm, whereas the BBC and CNN
channels are both showing
two programs during this
time period (each of which
lasts one hour).
 If you look at the last
element, it only contains
three elements even though
there are four columns in
the result below. This is
2|Page because the movie in the<tr>
Applying Borders by Using Attributes

By default, a table has no border. To add a one-pixel border around both

the table as a whole and around each individual cell, you can add this
attribute to the <table> tag

<table border =”1”>

As shown in the following examples, increasing the number increases the

width of the outer border around the whole table, but not the inner
borders:
Difference between
Border and padding
 Border –Border is Space outside
padding. has no space inside
cell?

Changing Cell Padding, Spacing, and Alignment

Cell padding, cell spacing, and cell alignment are three different ways you
can control how cell content appears on a page.

 Cell Padding -refers to the amount of space between an

element’s content and its outer edge. For a table cell,
padding refers to space between the cell border and the
text or graphic within it.

padding represented in the shaded

region space between border and the text.

 Cell Spacing – refers to the amount of space between the

outside of an element and the adjacent element. For a table
cell, spacing refers to the space between the border of one
cell and the border of the adjacent cell.

 Alignment -refers to the placement of the content within

its allotted area, either vertically or horizontally. For
3|Page
 normal paragraphs (not in a table), alignment refers only
to horizontal placement between the margins. For a table

4|Page
 cell, however, there are separate settings for vertical and
horizontal alignment.

Styling HTML table even and odd

cell Output

What does nth-child mean?

 It means select the

siblings for styling
alternate table row <tr>,
Table alter tr: nth-
child(odd) but only the
odd number among all
siblings, from the
perspective of their
parent element.

5|Page
3.1 HTML blocks
HTML Block and Inline Elements
Every HTML element has a default display value depending on what type
of element it is. The default display value for most elements is block or
inline.

A block-level Elements using <div> tag

A block-level element always starts on a new line and takes up the

full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

 <div>
 <h1> - <h6>
 <p>
 <form>

The <div> element has no required attributes, but style and class are common.

When used together with CSS, the <div> element can be used to style blocks of
content:

6|Page
Inline Elements using <span> tag

An inline element does not start on a new line and only takes up as much
width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

 <span>
 <a>
 <img>

The <span> element is an inline element that is often used as a

container for some text.

HTML Grouping Summary Tags

Tag Description

<div> Defines a section in a document (block-level)

<span> Defines a section in a document (inline)

7|Page
3.2 HTML Id and classes
HTML Id Attribute NB: * very important subtopic to learn
and understand in web development

The id attribute is used to specify the unique ID for an element of the

HTML document. It allocates the unique identifier which is used by
the CSS and the JavaScript for performing certain tasks.

Note: In the Cascading Style sheet (CSS), we can easily select an element with the
specific id by using the # symbol followed by id.

Note: JavaScript can access an element with the given ID by using the
getElementById () method.

Syntax: <tag id="value">

Example illustrating Html Id output

Points to remember
When using id in CSS (cascading
style sheet)
 ID Its detonated with # symbol
 Two different color defining
cars and bikes represents the
uniqueness of id

8|Page
HTML Classes
Class Attribute in HTML
The HTML class attribute is used to specify a single or multiple class
names for an HTML element.
A class attribute can be defined within <style> tag or in separate
file using the (.) character.
In an HTML document, we can use the same class attribute name
with different elements.

Applying class attribute using the

style tag at Html head section and
using (.) character to represent
class attribute.

Example 1 using class attribute. (same color to all headings using

class (.) character, to select multiple headings at once you control all
using Class Element)

When should I use class or ID? – id is used for single elements that
appear on the page for only once (e.g. header, footer, menu etc).

Whereas class is used for single or multiple elements that appear on the
page for once or more than once (e.g paragraph, links, buttons, input
boxes)
9|Page
Another Example with different class name
Let's use a class name "Fruit" with CSS to style all elements.

Class Attribute in JavaScript

You can use JavaScript access elements with a specified class name by using the
getElementsByClassName () method

output

 Using JavaScript to access

HTML document we use a
method.
 GetElementByclassName- <h2
class=” fruit “mango</h2>
declared in Html document to access
that in java script we use method called
GetElementByclassName to select Html
class element and its value “fruits”
 Var x – variable NB: in JavaScript data
type is not declared.
10 | P a g e
 3.3 Html layout

Creating a website layout is the activity of positioning the various

elements that make a web page in a well-structured manner and give
appealing look to the website

Websites often display content in multiple columns (like a magazine or

newspaper). Most modern websites and blogs consist of a header,

footer, navbar, perhaps

another sidebar, and let's not forget, the main content area. Something like this:

 <header> - Defines a header for a document or a section

 <nav> - Defines a container for navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent self-contained article
 <aside/Ads> - Defines content aside from the content (like
a sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details
 <summary> - Defines a heading for the <details> element

Different methods of creating HTML layout

 HTML Table Based Layout

 HTML Div Based Layout

 Using the HTML5 Structural Elements

11 | P a g e
Warning: Avoid tables and inline styles for creating layouts. Layouts
created using tables often rendered very slowly. Tables should only be

HTML Div Based Layout

Using the <div> elements is the most common method of creating
layouts in HTML. The <div> (stands for division) element is used for
marking out a block of content, or set of other elements inside
an HTML document. It can contain further other div elements if
required.

12 | P a g e
Technical code terms explanations

. header { point to note value px and unit10 i.e px10

Should not be separated.

padding: 10px 20px; {10px represents height 20px width}

background: #acb3b9;

13 | P a g e
<div class="container"> container is the overall layout defined
for each screen size HTML elements
like:<div><article><section><Form> and more.in short box layout
that includes from opening tag to closing tag.

We have two container classes

.container class – provides a responsive fixed width container.

.container-fluid class –provides full width of the view point.

<div class="wrapper clearfix"> term wrapper we give it a class,

and that class is responsible for encapsulating (bidding)all
visual elements on the page.

Clearfix – is a way for an element to clear its child

automatically without any additional markup.

Definition 2: - Quickly and easily clear floated content within

a container by adding clear fix utility.

Assignment one practical

Question
Due to be submitted on week 7 total marks (10 marks)

1. A TRIBUTE PAGE

Write a tribute of someone you admire and publish as a webpage. This

project will involve working with adding image, nav, links, lists and
paragraphs. This project will require knowledge of HTML to create.
14 | P a g e
However, you can use a bit of CSS to make the project look better. Use
HTML page layout format.

15 | P a g e