Tables and CSS, Links and Images

ModuleIV
Tables and CSS, Links and Images

Introduction to Tables
 A table in HTML is created using the <table> element and can be used to represent
information that exists in a two-dimensional grid. 
 A table is a matrix of cells. The cells in the top row often contain column labels, those in the
leftmost column often contain row labels, and most of the rest of the cells contain the data of
the table.
 The content of a cell can be almost any document element, including text, a heading, a
horizontal rule, an image, and a nested table.
Basic Table Tags

A table is specified as the content of the block tag <table>.
There are two kinds of lines in tables:
 the line around the whole table is called the border;
 the lines that separate the cells from each other are called rules.
 A table that does not include the border attribute will be a matrix of cells with neither a
border nor rules.
 The browser has default widths for table borders and rules, which are used if the border
attribute is assigned the value “border.” Otherwise, a number can be given as border’s value,
which specifies the border width in pixels. For example, border = “3” specifies a border 3
pixels wide.
 A border value of “0” specifies no border and no rules. The rules are set at 1 pixel when any
nonzero border value is specified. The border attribute is the most common attribute for the
<table> tag.
 In most cases, a displayed table is preceded by a title, given as the content of a <caption> tag,
which can immediately follow the opening <table> tag.
 The cells of a table are specified one row at a time. Each row of a table is specified with a
row tag, <tr>.
 Within each row, the row label is specified by the table heading tag, <th> . Each data cell of
a row is specified with a table data tag, <td>
The first row of a table usually has the table’s column labels. For example, if a table has three
data columns and their column labels are, Apple, Orange, and Screwdriver respectively, the first
row can be specified by the following:
<tr>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
Prof. Pradnya Malaganve Introduction to Web Programming

Each data row of a table is specified with a heading tag and one data tag for each data column.
For example, the first data row for our work-in-progress table might be as follows:
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>
The following document describes the whole table:
Eg:
<html>
<body>
<br />
<table border="1">
<caption> Diet </caption>
<tr>
<th>Breakfast</th>
<th>Lunch</th>
<th>Dinner</th>
</tr>
<tr>
<td>Apple</td>
<td>Rice</td>
<td>Cucumber</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Rice</td>
<td>Papaya</td>
</tr>
</table>
</body>
</html>

The rowspan and colspan Attributes
In many cases, tables have multiple levels of row or column labels in which one label covers two
or more secondary labels. For example, consider the display of a partial table shown in Figure
below. In this table, the upper-level label ‘Diet to be followed’ spans the three lower-level label
cells. Multiple-level labels can be specified with the rowspan and colspan attributes.
<tr>
<th colspan="3">Diet to be followed</th>
</tr>
The colspan attribute specification in a table header or table data tag tells the browser to make
the cell as wide as the specified number of rows.
Eg:
<html>
<body>
<table border="1">
<caption> Diet </caption>
<tr>
<th rowspan="2" ></th>
<th colspan="3">Fruit Juice Drinks</th>
</tr>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Strawberry</th>
</tr>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
<tr>

<th>
Lunch</th>
<td>1</td>
<td>1</td>

<td>1</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
</table>
</body>
</html>
Formatting a Data Table: Borders, Alignment, and Padding

1. Border:
To specify table borders in CSS, use the border property
Ex: <!DOCTYPE html>

<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
2. Alignment
Alignment property is used to align the values entered in the table, and the alignment can be right,
left and center justified.
Ex: <!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
th{
text-align: left;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>

<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
</table>
</body>
</html>
Output:
3. Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: thick solid;
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 15px;
text-align: right;

}
th {
padding: 15px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
OUTPUT:
thead and tbody Elements

Normally, table header cells will be put at the top of a table’s columns, but those can be put at the left
of each row.
For example, shown in FIGURE, note the year values in header cells at the left. The preferred way to
differentiate is to put the top cells’ row (or rows) in a thead element and put the subsequent rows in a
tbody element. can apply different CSS background-color rules to the different groups of header
cells—midnight blue for the top cells and violet red for the left-side cells.

thead th {background-color: midnightblue;}
tbody th {background-color: mediumvioletred;}

Definition and Usage
The <thead> tag is used to group header content in an HTML table.
The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each
part of a table (header, body, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and
footer. Also, when printing a large table that spans multiple pages, these elements can enable the table
header and footer to be printed at the top and bottom of each page.
Note: The <thead> element must have one or more <tr> tags inside.
The <thead> tag must be used in the following context: As a child of a <table> element, after
any <caption> and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default.
However, you can use CSS to style these elements.
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
}
</style>
</head>
<body>
<h1>The thead, tbody, and tfoot elements - Styled with CSS</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
The thead, tbody, and tfoot elements - Styled with CSS
Month Savings
January $100
February $80
Sum $180
Cell Spanning
Cell spanning in tables is basically merging the rows or columns of the table. Used attributes are:
rowspan and colspan.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell spanning of 3 columns and 2 rows</h2>
<table style="width:100%">
<tr>
<th colspan="3">Details</th>
<th> Age</th>
<th>Code</th>
</tr>
<tr>
<td rowspan=2>Kevin N.</td>
<td>Ross</td>
<td>US</td>
<td>23</td>
<td>456</td>
</tr>
<tr>
<td>Eve</td>
<td>UK</td>
<td>25</td>
<td>123</td>
</tr>
</table>
</body>
</html>
Output:
CSS Structural Psedo-class selectors

The previous chapter described lists, and this chapter describes tables and tabular formatting. All of
these things involve collections of elements.
When you have a collection of elements, sometimes you want to display one or more of those
elements differently from the rest.
You could do that by including class attributes in each element that you want to display differently.
You would then use the class attribute’s value as a class selector in a CSS rule. But if the number of
elements that you want to display with a special format is large, then quite a few class="value" code
insertions would be required.

tr:first-of-type
{
background-color: green;
}
tr:last-of-type
{
background-color: blue;
}
tr:nth-of-type
{
background-color: pink;
}
Example:
<html><head><style>
P:first-of-type{background:red;}
P:last-of-type{background:blue;}
P:nth-of-type(3){background:yellow;}
</style></head>
<body>
<p> Multiple lines of code </p>
<//body></html>
OUTPUT:

Web Accessibility
A subject that is important for tables specifically, but also for programming in general.
Web accessibility means that disabled users can use the Web effectively.
Most web accessibility efforts go toward helping users with visual disabilities, but web accessibility
also attempts to address the needs of users with hearing, cognitive, and motor skills disabilities.
Many countries have laws that regulate accessibility for websites. For example, https://www .access-
board.gov/guidelines-and-standards/communications-and-it describes web accessibility guidelines that
U.S. government agencies are required to follow.
To promote the social good (through equal opportunities for disabled people) and to promote their own
businesses, many companies have policies that require web developers and software purchasers to
follow web accessibility standards. Such policies can promote the company’s business not only by
attracting people who fall into the traditional disabled categories, but also by providing added value to
other people. For example, accessible websites tend to be better for users with slow Internet
connections and for users who need glasses.
Typically, visually impaired users have screen readers to read web pages. A screen reader is software
that figures out what the user’s screen is displaying and sends a text description of it to a speech
synthesizer. The speech synthesizer then reads the text aloud.

CSS display Property with Table Values
Specifically, used a display: inline property-value pair to display an address element (which is
normally a block element) in the flow of its surrounding sentence. The display property can be used
for much more than just inlining block element content. It can also be used to emulate the various parts
of a table.
Ex:
<style>
.table {
display: table;
border-spacing: 20px;
}
.caption
{
display: table-caption;
font-size: xx-large;
text-align: center;
}
.row
{
display: table-row;
}
.row > *
{
display: table-cell;
text-align: center;
}
</style>
<body>
<div class=”caption”> WellCome Home </div>
<div class=”row”>
<span img src=”image1.jpg” alt=””> </span>
</div>
</body></html>
“a” Element
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red

To implement a link, you’ll need to use the a element. Here’s an example a element that implements a
link to Vishweswarayya Technological University’s website:
<a href =”https://vtu.ac.in/en”> VTU </a>
The text that appears between an a element’s start tag and end tag forms the link label that the user
sees and clicks on. So in this code, the link label is “VTU.” By default, browsers display link labels
with underlines. So this code renders like this”
VTU
The blue color indicates that the linked-to page has not been visited.
When the user clicks on a link, the browser loads the resource specified by the href attribute. For this
example, the “resource” is another web page, so when the user clicks on the “VTU” link, the browser
loads that web page—the one at https://vtu.ac.in.
As an alternative to specifying a web page for the href attribute’s resource, you can specify an image
file for the href attribute’s resource.
Besides enabling a user to load a resource, the ‘a element’ can be used as a mechanism that enables a
user to download a file of any type—image file, video file, PDF file, Microsoft Word file, and so on.
To implement that download functionality, include a download attribute as shown here:

<a download href=”https//vtu.ac.in/catalog”> VTU catalog </a>
Relative URLs
A relative URL value allows to jump to a web page that is existed on the same web server as the
current web page.
It does so by specifying a path from the current directory to the destination web page. The current
directory is the directory where the current web page is existed.
The destination web page is the page that the user jumps to after clicking on the link.
Note the example directory tree in FIGURE 6.2. It shows the container relationships between all the
files and directories that are within the oleung directory. The oleung directory is the home page
directory for student Olivia Leung.
A home page is the default first page a user sees when the user visits a website.
It is a the directory where a home page resides, and a home page is the starting point for a user’s
browsing experience on a particular website.

A subdirectory (also called a subfolder or a child folder) is a directory that is contained within another
directory. Thus, in Figure 6.2, there are four subdirectories within the home page directory and one
subdirectory within the misc subdirectory.
The other entities in Figure 6.2 (the words without borders) are files. The index.html file is in the
oleung directory, and the other files are in the tree’s subdirectories.
In forming a path for a relative URL value, need to navigate between a starting directory and a target
file.
In doing so, follow these rules:
▸ Use /’s to separate directories and files.
▸ Use “..” to go from a directory to the directory’s parent directory
Ex: <a href=”../index.html”> Olivia’s Home Page </a>
Navigation Within a Web Page

Website navigation is a collection of user interface components that helps visitors
find content and features on a site. These components take the form of copy, link
text and buttons, and menus.
OR
when the user clicks on a link which takes the user to some specified point within the current web
page, this process is called navigation within a web page.
That can be particularly useful for long web pages, so the user can quickly jump to designated
destinations within the web page.
Note the Back to the Top link at the bottom of the page. With a long web page, it’s common to have
such a link so the user can quickly get back to the top after scrolling to the bottom.
Syntax for Internal Link:
To jump to a particular location within the current web page, use a value starting with # such that that
value matches an id attribute’s value for an element in the web page.
Here’s the Clock Tower web page’s code that links to the pledge drive section:
<a href=”# pledge-drive”> Pledge Drive </a>
And here’s the element that that link jumps to:
<h3 id=”pledge-drive”> Pledge Drive </h3>
Note the spelling for pledge-drive. Standard coding conventions suggest using hyphens to separate
multiple words in an id value.

CSS for Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
links can be styled differently depending on what state they are in.
The four links states are:
 a:link - a normal, unvisited link

 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked
When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited

 a:active MUST come after a:hover
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
</body></html>
Output:
Bitmap Image Formats: GIF, JPEG, PNG

An icon, which is simply a small image file, typically has 16 rows with 16 pixels in each row. Within a
bitmap image file, every pixel gets mapped to a particular color value, and each color value is a
sequence of bits (where a bit is a 0 or a 16 ). For a browser to display a bitmap image, it displays each
pixel’s mapped color. This reliance on mapping color bit values to pixels is the basis for the name
bitmap image.
The three most common formats for bitmap image files (also called raster image files) on the Web are
GIF, JPEG, and PNG.

GIF: GIF files use a filename extension of .gif. GIF stands for Graphics Interchange Format.
In creating a GIF file from an original picture, the original picture’s colors are mapped to an 8-bit
palette of colors. That means each pixel uses 8 bits, and those 8 bits determine the pixel’s color. And
the entire set of colors forms the image’s color palette. Each image has its own color palette with its
own set of colors.
JPEG: JPEG stands for Joint Photographic Experts Group.JPEG files use a filename extension of
.jpeg or .jpg. In creating a JPEG file from an original picture, the original picture’s colors are mapped
to a 24-bit palette of colors. With 24 bits, there are approximately 16 million permutations of 0’s and
1’s in each color value (224 = 16,777,216). That means approximately 16 million unique colors can be
represented, and that’s more colors than the human eye can discern.
PNG: PNG stands for Portable Network Graphics, and PNG is pronounced “ping.” PNG files use a
file name extension of .png.
The PNG format provides more flexibility in terms of clarity versus file size. In creating a PNG file
that doesn’t require much storage, all the way up to 64 bits per pixel (to create an image file that is
very clear). The PNG format provides more flexibility in terms of transparency. Images can be created
with different levels of transparency for different parts of an image. GIF images can have only two
levels of transparency—completely opaque or completely transparent. PNG images can have 256
levels of transparency.
img Element
<img src=”file/image1.png” alt=”smiley face” width=”50” height=”50”>
The src attribute specifies the image’s filename and the location of the image’s file. In this img
element, the filename is image1.png. The location is indicated by the path that comes before the
filename.
<!DOCTYPE html>
<html>
<head>
<style>
img {

border: 1px solid #ddd;
border-radius: 40%;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<h2>Thumbnail Image</h2>
<p>Use the border property to create thumbnail images:</p>
<img src="paris.jpg" alt="Paris" style="width:150px">
</body>
</html>
OUTPUT:
Responsive Images
Responsive web design (RWD) is the practice of writing code that dynamically generates web pages
that conform to different screen sizes and viewing orientations (portrait or landscape).
Background Images
Background images can also respond to resizing and scaling.
Here we will show three different methods:
1. If the background-size property is set to "contain", the background image will scale, and try to fit
the content area. However, the image will keep its aspect ratio (the proportional relationship between
the image's width and height)
Using The width Property

If the width property is set to a percentage and the height property is set to "auto", the image will be
responsive and scale up and down:
.responssive{ width:100%;
Height:auto;
}
Using The max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to
be larger than its original size

.responssive{ width:100%;
Height:auto;
Max-width: 60%;
}
Positioning Images
The img element is an inline element (more formally, a phrasing element), so it gets displayed within
the normal flow of its surrounding text. That works well for small images (icons), but not so well for
medium and large images.
To avoid wasted space around a medium or large image, it has to be displayed on a line by itself by
surrounding it with a block element.
The CSS float property specifies how an element should float
The float property is used for positioning and formatting content e.g. let an image
float left to the text in a container.
The float property can have one of the following values:
 left - The element floats to the left of its container

 right - The element floats to the right of its container
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h2>Float Right</h2>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
</p>
</body>
</html>
OUTPUT:

Shortcut Icon
When you open a new tab in a browser, do you notice the icon that appears in the tab area at the top of
the window?
To mark your web page with a shortcut icon in the browser’s tab area, in your web page’s head
container, include a link element with rel="icon".
<link rel=”icon” href=”file/image1.png”>
iframe Element
This element displays an image in a frame that’s embedded within the browser window.
The <iframe> tag specifies an inline frame.An inline frame is used to embed another
document within the current HTML document.
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element + CSS</h1>
<p>An iframe with default borders:</p>
<iframe src="/default.asp" width="100%" height="300">
</iframe>
</body>
</html>
OUTPUT:

Tables and CSS, Links and Images

Uploaded by

Copyright:

Available Formats

Tables and CSS, Links and Images

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tables and CSS, Links and Images

Uploaded by

Copyright:

Available Formats

ModuleIV

Tables and CSS, Links and Images

Basic Table Tags

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

Formatting a Data Table: Borders, Alignment, and Padding

Ex: <!DOCTYPE html>

<h2>Add a border to a table:</h2>

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

thead and tbody Elements

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

The <thead> tag is used to group header content in an HTML table.

Prof. Pradnya Malaganve Introduction to Web Programming

<h1>The thead, tbody, and tfoot elements - Styled with CSS</h1>

Prof. Pradnya Malaganve Introduction to Web Programming

CSS Structural Psedo-class selectors

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

Prof. Pradnya Malaganve Introduction to Web Programming

<a href =”https://vtu.ac.in/en”> VTU </a>

To implement that download functionality, include a download attribute as shown here:

Prof. Pradnya Malaganve Introduction to Web Programming

Navigation Within a Web Page

Prof. Pradnya Malaganve Introduction to Web Programming

The four links states are:

 a:link - a normal, unvisited link

 a:hover MUST come after a:link and a:visited

Prof. Pradnya Malaganve Introduction to Web Programming

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

Bitmap Image Formats: GIF, JPEG, PNG

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

Using The width Property

Prof. Pradnya Malaganve Introduction to Web Programming

The float property can have one of the following values:

 left - The element floats to the left of its container

Prof. Pradnya Malaganve Introduction to Web Programming

Prof. Pradnya Malaganve Introduction to Web Programming

You might also like