lOMoARcPSD|29880408

Module-4PLC - 22 SCHEME WEB NOTES FOR FIRST SEM

Introduction to Web Programming (Mangalore Institute of Technology and Engineering)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by ashwini p ([email protected])
 lOMoARcPSD|29880408

Module-4
Tables and CSS, Links and Images
Introduction
A table in CSS is used to apply the various styling properties to the HTML Table elements to
arrange the data in rows and column. The data tables and the HTML table elements used to
implement them such as table, tr, th, td, and so on.
CSS is used to layout the tables using CSS’s display property with various values such as
table, table-caption, table-row, and so on. The CSS’s position property is used for absolute
positioning, where an element gets positioned relative to its containing block.
Table Elements
To create a data table, start with a table container element, fill the table element with a tr
element for each of its rows, and fill each tr element with th elements for header cells and td
elements for data cells. To display a title for a table, embed a caption element within the table
container.

If you include a caption element within a table container, the caption element must be the
first element within the table. If you want the caption’s text displayed at the bottom, you can
use the following CSS type selector rule: caption {caption-side: bottom;}
The caption-side property specifies the placement of a table caption.
caption-side: top (default)

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Use th for a cell that is a description for other cells’ content; use td for all other cells in the
table.

Output:

Formatting a Data Table: Borders, Alignment, and Padding

The formatting of data tables in terms of their borders, cell alignment, and cell padding done
using CSS property in HTML5.
CSS provides a number of attributes for styling tables. These attributes allow to separate cells
in a table, specify table borders, and specify the width and height of a table.
Border Property
The border property’s takes border value as: thin solid
which goes thin as border-width property, and solid as border-style property. With table, th,
and td all listed in the rule.
Example:

Output:

Collapse property sets whether the table borders should be collapsed into a single border.

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Border style:

Alignment Property and Padding

The two formatting features—cell alignment and cell padding.Table header cells (th) have
a default alignment of center and a default weight of bold. Table data cells (td) have a
default alignment of left. Both th and td cells have a default padding of none.
To adjust the horizontal alignment of text in table cells, use CSS’s text-align property with
a value of left, right, or center. To adjust the padding around the text in table cells, use
CSS’s padding property with a pixel value (e.g., 5px).

CSS Structural Pseudo-Class Selectors

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the
selected element(s).
example, the pseudo-class :hover can be used to select a button when a user's pointer hovers
over the button and this selected button can then be styled.
A pseudo-class can be defined as a keyword which is combined to a selector that defines the
special state of the selected elements. It is added to the selector for adding an effect to the
existing elements based on their states. The names of the pseudo-class are not case-sensitive.
Syntax
A pseudo-class starts with a colon (:). Let's see its syntax.
selector: pseudo-class {
property: value;

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

}
Example:
<style>
h1:hover{
color:red;
}
</style>
When there is regularity in the locations of certain elements within a collection of elements,
you can avoid the class="value" code insertions described and, instead, implement that
functionality with a structural pseudo-class CSS rule. Pseudo-classes conditionally select
elements from a group of elements specified by a standard selector.
For example, the following code uses a standard tr type selector to select all the tr elements in
a web page, and the :first-of-type pseudo-class checks each of those elements to see if it is a
first tr element within a particular table:
tr:first-of-type {background-color: palegreen;}
For each conditionally selected tr element (i.e., for each first-row tr element), the browser
displays the element with a pale green background color.
A pseudo-class is called a “pseudo-class” because using a pseudo-class is similar to using a
class attribute, but the two entities are not identical.
A pseudo-class is like a class selector in that it matches particular instances of elements
(that’s what happens with elements that use class attributes). But they are different from class
selectors in that they don’t rely on the class attribute.
The W3C defines 12 structural pseudo-classes, but we’ll focus on three of the most popular
ones; they are:
first-of-type,: last-of-type, and :nth-of-type().

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

The :first-of-type CSS pseudo-class represents the first element of its type among a group
of sibling elements.
The :nth-of-type() CSS pseudo-class matches elements based on their position among
siblings of the same type (tag name).
The :last-of-type CSS pseudo-class represents the last element of its type among a group
of sibling elements.
The :first-of-type CSS pseudo-class represents the first element of its type among a
group of sibling elements.

The :nth-of-type() CSS pseudo-class matches elements based on their position among
siblings of the same type (tag name).

The :last-of-type CSS pseudo-class represents the last element of its type among a group
of sibling elements.

thead and tbody Elements

Definition and Usage

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

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.
The <tbody> tag is used to group the body content in an HTML table.
The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify
each part of a table (body, header, 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.

Output:

thead and tbody Elements (text book example)

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

<meta name="author" content="John Dean"><title>Global Temperatures</title>

<style> body {display: flex; justify-content: center;}
table, th, td {border: none;}
th, td {padding: 10px;}
thead th { background-color: midnightblue; color: white;
vertical-align: bottom;}
tbody th {background-color: mediumvioletred;
color: white; }
td { background-color: mistyrose;
text-align: center;
}</style></head>
<body><table>
<caption>Average Annual Global Temperatures</caption> <thead>
<tr> <th>Year</th> <th>Temp<br>Rank</th>
<th>Avg<br>Temp (&deg;F)</th></tr></thead>
<tbody>
<tr><th>2016</th><td>1</td><td>58.98</td></tr>
<tr><th>2015</th><td>2</td><td>58.77</td></tr>
<tr><th>2014</th><td>3</td><td>58.53</td></tr>
<tr><th>2013</th><td>5</td><td>58.37</td></tr>
<tr><th>2012</th><td>9</td><td>58.33</td></tr>
</tbody></table></body></html>
Output:

Cell Spanning

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Colspan: The colspan attribute in HTML specifies the number of columns a cell should span.
It allows the single table cell to span the width of more than one cell or column.
The colspan attribute in HTML specifies the number of columns a cell should span. It allows
the single table cell to span the width of more than one cell or column.
Usage: It can be used with <td> and <th> element while creating an HTML Table.
Attribute Values: It contains a value i.e number Which specify the number of columns that a
cell should span.
<td>: The colspan attribute when used with <td> tag determines the number of standard cells
it should span.
Syntax:
<td colspan = "value">table content...</td>
The value specifies the number of columns that the cell fills. The value must be an integer.
Cell Spanning- colspan
<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Output:

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Rowspan: The rowspan attribute in HTML specifies the number of rows a cell should span.
That is if a row spans two rows, it means it will take up the space of two rows in that table. It
allows the single table cell to span the height of more than one cell or row.
Usage: It can be used with <td> and <th> element in an HTML Table.
Attribute Values: It contains a value i.e number Which specify the number of rows that a
table cell should span.
Syntax:
<td rowspan = "value">table content...</td>
The value specifies the number of rows that the cell fills. The value must be a integer.
Cell Spanning- rowspan
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Output:

Web accessibility

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

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.
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.
If you can’t see the table and you rely on someone else reading the table’s content to you,
you’ll probably have a harder time understanding what’s going on. Likewise, because their
output is purely auditory and not visual, screen readers are a bit challenged when it comes to
describing a table’s content.
To overcome that challenge, screen readers rely on the fact that most data tables have header
cells in the first row or the first column.
When screen readers see such “simple” data tables, they assume that each header in the first
row describes the data cells that are below it.
Likewise, if there are headers in the first column, screen readers assume that each of those
headers describes the data cells that are at the right of the header.
If you have a data table in which one or more header cells are not in the first row or column
(i.e., it’s not a simple table), then you should consider adding code to make the table more
web accessible. In particular, you should consider embedding a details element in the table’s
caption element
The details element provides a description of the table’s content so that a screen reader can
read the description and get a better understanding of the nature of the table’s organization.

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

CSS display Property with Table Values

In CSS, the display property determines how an element looks.
Basic display Property Syntax
element {
display: value;
}
The display property takes many different values such as inline, inline-block, block, table,
and more, which all influence the layout and presentation of an element on the web page.
CSS display Property with Table Values
Example:
<style>
.table {display: table;}
...
</style>
<body>
<div class="table">
...
</div>
</body>
CSS display Property with Table Values
Table values for the CSS display property

table-row-group (In HTML: TBODY):Specifies that an element groups one or more rows.

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

table-header-group (In HTML: THEAD) :The table-header-group value causes its rows to
display before all other rows and after any table captions (even if the table-header-group
element code appears below any table-row element code). If a table contains multiple
elements with table-header-group values, only the first such element behaves like a thead
element; the others behave like tbody elements.
table-cell (In HTML: TD, TH):Specifies that an element represents a table cell.
table-caption (In HTML: CAPTION):Specifies a caption for the table. All elements with
'display: table-caption' must be rendered,

Output:

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Tables created with the display property are displayed with no gaps between their cells. For
the Ancient Wonders web page, that default behavior would have led to pictures that were
touching. To avoid that ugliness, you can use the border-spacing property, and that’s what we
did in the Ancient Wonders style container:
.table {
display: table;
border-spacing: 20px;
}
When you use the border-spacing property, you should apply it to the entire table, not to the
table’s individual cells.
The border-spacing property allows you to specify horizontal and vertical cell spacing
separately. Here’s an example:
border-spacing: 15px; 25px;
The first value, 15px, specifies horizontal spacing, and the second value, 25px, specifies
vertical spacing. Horizontal spacing refers to the width of the gap between adjacent cells in
the same row. Vertical spacing refers to the height of the gap between adjacent cells in the
same column.
The border-spacing property adds space outside each cell’s border. On the other hand, the
padding property adds space inside each cell’s border.
a Element
To implement a link, you’ll need to use the 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
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
a Element

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

<a href="http://www.park.edu">Park University</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 “Park University.” By default,
browsers display link labels with underlines. So this code renders like this:
Park University
The blue color indicates that the linked-to page has not been visited. Continuation Rule for
Elements that Span Multiple Lines

The a element is a phrasing element (which means that it displays “inline,” like a phrase
within a paragraph). Most phrasing element code is short and can easily fit on one line, but
the preceding a element is rather long and spans two lines. The solution was to press enter at
the end of the a element’s start tag and indent the next line.

Different Types of href Values

Attribute Values

Relative URLs
A relative URL value allows you to jump to a web page that resides 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
resides. The destination web page is the page that the user jumps to after clicking on the link.
In forming a path for a relative URL value, you’ll need to understand how files and
directories are organized in a directory tree structure.

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

. A home page is the default first page a user sees when the user visits a website.
IN above example oleung is the home page directory with file index.htm.
A subdirectory (also called a subfolder or a child folder) is a directory that
is contained within another directory
In above example hw1,hw2,tutorial,misc are subdirectories.
In forming a path for a relative URL value, you’ll need to navigate between a starting
directory and a target file. In doing so, you’ll need to follow these rules:
▸ Use /’s to separate directories and files.
▸ Use “..” to go from a directory to the directory’s parent directory
Relative Path Examples.
<a href="menu.html">Menu Page</a>
Path-Absolute URLs
A web server’s root directory is the directory on the web server that contains all the
directories and files that are considered to be part of the web server.
If you want to have the relative URL’s path start at the web server’s root directory, preface
the URL value with /.
<a href="/oleung/index.html">Olivia's Website</a>
Navigation Within a Web Page
Website Navigation, as name suggests, is a way to showing importance and relevance of
pages, content, and information on website. It is way that helps users or visitors to find
content that they want to see. It is simply a way of navigating pages, content and information
on website using internet. It can be presented in different ways such as spider bars, menus in
header or footer, etc. Simplicity is very essential and important for good website navigation.
It is for when you want a link that takes the user to some specified point within the current
web page. That can be particularly useful for long web pages, so the user can quickly jump to
designated destinations within the web page
Syntax for Internal Link
To jump to a designated location within the current web page, you need to use a value
starting with # such that that value matches an id attribute’s value for an element in the web
page.
<a href="#pledge-drive">Pledge Drive</a>
And here’s the element that that link jumps to:

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

<h3 id="pledge-drive">Pledge Drive</h3>

CSS for Links

By default, the major browsers use blue text for unclicked links and purple text for clicked
links.
Downloaded by ashwini p ([email protected])
 lOMoARcPSD|29880408

A link is defined as a “visited link” if it leads to a location that the computer’s browser has
been to recently. Browsers have different time limits to determine whether a location has
been visited “recently.” If you clear your browser’s history, the browser will consider all
links to be unvisited, so they will go back to their unvisited color.
You can use CSS to override the link colors specified by the browser, and those CSS rules
override the user’s link color browser settings as well.
Now for the CSS that enables you to specify link colors. For unvisited links, use this syntax:
a:link {color: color-value;}
The a is the element type for a link element. The :link thing is a pseudo-class. It qualifies the
a element type by searching only for links that have not been visited. As you’d expect, the
a:linkselector is known as a pseudo-class selector.
You now know to use a:link for unvisited links. For visited links, use a:visited, like this:
a:visited {color: color-value;}
In addition to being able to change the colors in your web page’s links, you can also change
your links’ underline scheme. By default, browsers display links with underlines. If that leads
to visual clutter or confusion with regular text that’s underlined, and you’d like to have no
link underlining, then use text-decoration: none, like this:
a {text-decoration: none;}
If link underlines are disabled using this CSS rule, but you want to display underlines when
the mouse hovers over a link, use the a:hover pseudo-class selector with text-decoration:
underline, like this:
a:hover {text-decoration: underline;}
Bitmap Image Formats: GIF, JPEG, PNG
There are two basic categories of image files—bitmap image files and vector graphics files.
Bitmap (or raster) images are stored as a series of tiny dots called pixels. Each pixel is
actually a very small square that is assigned a color, and then arranged in a pattern to form
the image. When you zoom in on a bitmap image you can see the individual pixels that make
up that image. Bitmap graphics can be edited by erasing or changing the color of individual
pixels using a program such as Adobe Photoshop.
vector images are not based on pixel patterns, but instead use mathematical formulas to draw
lines and curves that can be combined to create an image from geometric objects such as
circles and polygons.
Vector images have some important advantages over bitmap images. Vector images tend to
be smaller than bitmap images. That’s because a bitmap image has to store color information
for each individual pixel that forms the image. A vector image just has to store the
mathematical formulas that make up the image, which take up less space.

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

GIF Image File Format

GIF or Graphics Interchange Format files are used for web graphics. They can be animated
and are limited to only 256 colors, which can allow for transparency. GIF files are typically
small in size and are portable.
JPEG (.jpg, .jpeg)
Joint Photographic Experts Group is a loss-prone (lossy) format in which data is lost to
reduce the size of the image. Due to compression, some data is lost but that loss is very less.
It is a very common format and is good for digital cameras, nonprofessional prints, E-Mail,
Powerpoint, etc., making it ideal for web use.
PNG (.png)
PNG or Portable Network Graphics files are a lossless image format. It was designed to
replace gif format as gif supported 256 colors unlike PNG which support 16 million colors.

Image Format Comparison

As mentioned earlier, the GIF format supports simple animation. The PNG format does not
support animation, but in 2001, an offshoot of the PNG working group formally introduced
an extension to the PNG format called MNG that does support animation. Here are a few
advantages that MNG files have over animated GIF files:
▸ Significantly improved compression
▸ Ability to move images relative to the other images in the animation’s sequence of images
▸ Ability to use not only PNG images, but also JPEG-oriented (JNG format) images
img Element
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The
<img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext"

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

The src Attribute

The required src attribute specifies the path (URL) to the image.

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).
<!DOCTYPE html>
<html><body><h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image get
an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania">
</body>
</html>
Output:

Responsive Images
Responsive images will automatically adjust to fit the size of the screen.
Resolution Switching
Resolution switching is when you provide a list of images for different versions of the same
picture where the images are identical in terms of aspect ratio, where aspect ratio is the ratio
of an image’s width to height.

comma-separated list of values. Each value has two parts—a condition that checks the width
of the browser window’s viewport and the width of the slot in which the image displays. The
viewport is the area below the address bar where web page content displays. As you can

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

imagine, mobile devices have the smallest viewports, whereas laptops and desktop monitors
have the largest viewports.
From Figure 6.16, here’s the sizes attribute’s first value:
(max-width: 340px) 90vw
The max width: 340px condition means that if the device’s viewport is less than or equal to
340 pixels, then the web page uses 90vw for its image slot width.
Art Direction
Use art direction to improve visual presentation.
For both resolution switching and art direction, you provide a list of images for different
versions of the same picture. With resolution switching, the different versions are different
sizes, but they have the same aspect ratio.
On the other hand, with art direction, the different versions can have different aspect ratios as
a result of cropping the original picture in different ways. For example, for a desktop
computer layout, the browser’s viewport would be wider, so having a wide landscape-
oriented picture should be OK.
But for a mobile device layout, the browser’s viewport would be narrower, so using that same
landscape-version image would probably make the picture’s main subject too small.
The solution is to use a portrait-version image where the main subject can be zoomed in.
Positioning of image.
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, you might want to display it on a
line by itself by surrounding it with a block element.
A technique—“floating” an image to the left or to the right, so its adjacent text displays along
its right or left border, respectively.
To float an image, you apply a CSS rule to the img element, where the CSS rule uses the float
property and a value of left or right.
.left {float: left; margin: 8px;}
.right {float: right; margin: 8px;}
Here are the img elements that use these CSS rules:
<img class="left" src="../images/coconut.jpg"
width="100" height="150" alt="">
<img class="right" src="../images/nuytsia.jpg"
width="150" height="100" alt="">

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Shortcut Icon
A favicon is a small image displayed next to the page title in the browser tab.
To mark your web page with a shortcut icon in the browser’s tab area, in your web page’s
headcontainer, include a link element with rel="icon". For example, here’s the code from the
Trees web page that causes the tree shortcut icon to be displayed:
<link rel="icon" href="../images/tree.png">
For shortcut icons, the W3C recommends using a GIF or PNG file with dimensions of 16 ×
16 pixels or 32 × 32 pixels. If you use an image file with dimensions different from 16 × 16
or 32 × 32, the browser will adjust its size, so it fits in the small square area reserved for the
shortcut icon in the browser window’s tab
iframe Element
HTML Iframe is used to display a nested webpage (a webpage within a webpage). The
HTML <iframe> tag defines an inline frame, hence it is also called as an Inline frame.
An HTML iframe embeds another document within the current HTML document in the
rectangular region.
The webpage content and iframe contents can interact with each other using JavaScript.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
Here, "src" attribute specifies the web address (URL) of the inline frame page.
iframe Element
Set Width and Height of iframe
You can set the width and height of iframe by using "width" and "height" attributes. By
default, the attributes values are specified in pixels but you can also set them in percent. i.e.
50%, 60% etc.

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

iframe Element-Formatting
Remove the border of iframe
By default, an iframe contains a border around it. You can remove the border by using
<style> attribute and CSS border property.

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Iframe Target for a link

You can set a target frame for a link by using iframe. Your specified target attribute of the
link must refer to the name attribute of the iframe.

Textbook example:

Output:

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

QUESTION BANK:
iframe Element-Formatting5.2 Table Elements
1. For each of the following elements, what is its HTML start tag?
a) A table row element
b) An element within a table row that holds data
c) An element in the top row of a table that describes the data in the column below
5.3 Formatting a Data Table: Borders, Alignment, and Padding
2. Using type selectors, write a CSS rule that creates a thin solid single-line border around all
tables and uses a single line to separate adjacent columns and adjacent rows.
3. Using type selectors, write a CSS rule that puts 5 pixels of padding around the text in each
table header and data cell.
5.4 CSS Structural Pseudo-Class Selectors
4. Write a CSS structural pseudo-class selector that selects the odd table row elements,
starting
with the third one.
5.5 thead and tbody Elements
5. What is the purpose of the thead element, and what is the purpose of the tbody element?
6. What does the following CSS rule do?
body {display: flex; justify-content: center;}
5.6 Cell Spanning
7. Assume the following style and body elements are part of a complete html5 document.
Provide a sketch that shows what the code displays.
<style>
th, td {padding: 5px 20px;}
table, th, td {border: solid thin; border-collapse: collapse;}
</style>
<body>
<table>
<tr> <th></th> <th colspan="2"></th> <th></th> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr>
<td rowspan="3"></td> <td></td> <td></td>
<td rowspan="3"></td>
</tr>

Downloaded by ashwini p ([email protected])

 lOMoARcPSD|29880408

Review Questions 207

<tr> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
</table>
</body>
5.7 Web Accessibility
8. What is a screen reader?
5.8 CSS display Property with Table Values
9. For each HTML element, provide a CSS property-value pair that implements its
presentation functionality.
a) table
b) caption
c) tr
d) td
10. Why is the div element a good choice for CSS implementation of table and row
components?
11. The display: table-cell property does not work well with elements in the embedded
category like img, audio, and video. How can you work around this problem?

Downloaded by ashwini p ([email protected])