XP

CHAPTER 5 WORKING WITH TABLES

AND COLUMNS

1
Objectives XP

• Explore the structure of a web table

• Create table heading and data cells
• Apply CSS styles to a table
• Create cells that span multiple rows and
columns
• Add a caption to a table

2
Objectives (continued) XP

• Create row and column groups

• Apply styles to row and column groups
• Display page elements in table form

3
Structure of a Web Table XP

4
Introducing Web Tables XP

• Web table
– HTML structure that consists of multiple table
rows
– Each table row contains one or more table cells
– Effective tool for organizing and classifying web
page content
– Consists of a table element

5
Marking Tables and Table Rows XP

• A table element contains a collection of table

rows marked using the tr (table row)
element
• A table contains cells within each row
• Size of a table is defined by
– number of table rows
– number of cells within rows

6
Marking Tables and Table Rows (continued
XP
1)
• General structure of a web table:
<table>
<tr>
table cells
</tr>
<tr>
table cells
</tr>
…
</table>

7
<h2>Course Assessment</h2> MyFirstTable.html
XP
<table>
<tr>
<td>Assignment</td>
<td>:</td>
<td>40%</td>
</tr>
<tr>
<td>Test</td>
<td>:</td>
https://www.w3schools.com/tags/t
<td>50%</td>
ag_table.asp
</tr>
<tr>
<td>Exercises</td> https://
<td>:</td> www.w3schools.com/code/tryit.asp?fil
<td>10%</td> ename=GKNLR5KOP4TG
</tr>
</table> 8
Marking Tables and Table Rows (continued
XP
2)

9
Marking Table Headings and Table Data XP

• Web tables support two types of table cells

– Header cells
o Contains content placed at the top of a column or
beginning of a row
o By default, displays text in bold and centers text
horizontally
o Marked using the th element

10
Marking Table Headings and Table Data XP
(continued 1)
– Data cells
o Contains content within columns or rows
o By default, displays text as unformatted text and is
aligned to the left within the cell
o Marked using the td element

11
Marking Table Headings and Table Data XP
(continued 2)

12
Marking Table Headings and Table Data XP
(continued 3)

https://www.w3scho
ols.com/tags/tag_tabl
e.asp

13
<table style=“border-collapse: collapse; border-spacing:5px”>
<tr>
XP
<th>Assesment Type</th>
<th></th>
<th>Percentage</th>
</tr>
<tr>
<td>Assignment</td>
<td>:</td>
<td>40%</td>
</tr> TableHeading.html
<tr>
<td>Test</td>
<td>:</td>
<td>50%</td>
</tr>
<tr>
<td>Exercises</td>
<td>:</td>
<td>10%</td>
</tr></table> 14
Adding Table Borders with CSS XP

• The CSS border property is used to add

borders to any part of a web table
• Borders need not be of the same style
• Two style choices for borders
– Separate borders
– Collapsed borders

15
Adding Table Borders with CSS (continued 1)XP

https://www.w
3schools.com/
cssref/tryit.asp
?filename=tryc
ss_border-coll
apse

https://
www.w3schools.com
de/tryit.asp?filename
KQW5LB7RXXC

border-collapse:separate or collapse 16
Adding Table Borders with CSS (continued 2)XP
• To choose between separate or collapsed borders model
apply the following property to the table element:
border-collapse: type;
where type is either separate or collapse
• The separate borders model sets the spacing between
borders using
border-spacing: value
where value is in CSS units of measure
https://www.w3schools.com/cssref/pr_border-spacing.asp

border-collapse: separate;
border-spacing: 15px; border-collapse: separate;
border-spacing: 15px 50px;

17
Adding Table Borders with CSS (continued 3)XP
• The collapsed borders model
– Borders from adjacent elements are merged together to
form a single border
– Borders are joined to combine their features
– Combining adjacent borders with different widths, styles,
or colors is complicated

18
Adding Table Borders with CSS (continued 4)XP
• Five rules to reconcile the differences between adjacent
borders
– If either border has a style of hidden, the collapsed
border is hidden
– Border style of none is overridden by another border
style
– The style of wider border takes priority over the narrower
border if neither border is hidden

19
Adding Table Borders with CSS (continued 5)XP
– Double borders have higher precedence followed by solid, dashed,
ridge, outset, groove and inset
– If borders differ only in color, precedence is given to borders
– Precedence to borders in decreasing order
o Borders around individual table cells
o Borders for table rows
o Borders for row groups
o Borders for columns
o Borders for column groups
o Borders around the entire table

https://www.w3schools.com/cssref/playit.asp?fi
lename=playcss_border-style&preval=dotted

20
Adding Table Borders with CSS (continued 6) XP

https://www.w3schools.com/cssref/playit.asp?fi
lename=playcss_border-style&preval=dotted

21
Spanning Rows and Columns XP

• Spanning cells
– Single cell that occupies more than one cell row
and/or column
– Created by adding rowspan and/or colspan
attributes to td or th elements
– Spanning starts in the cell with rowspan or
colspan attributes and covers the cells in the
right and below the initial cell

22
 XP
Spanning Rows and Columns (continued 1)
– rowspan=“rows”
where rows is the number of rows that the cell
occupies
– colspan = “cols”
where cols is the number of columns that the
cell occupies

23
 XP

https://www.
w3schools.co
m/tags/tryit.a
sp?filename=t
ryhtml_table_
span

<td rowspan =“2” colspan=“2”> Today <td colspan=“3”> </td>

</td>

rowspan=“rows”
where rows is the number of rows that the
cell occupies

colspan = “cols”
where cols is the number of columns
that the cell occupies
https://
www.w3schools.com/code/tryit.asp?fil 24
<td rowspan=“3”> </td> ename=GO8O6CVN4WQ7
<table class="assesment">
<tr>
XP
<th colspan="2">Assesment Type</th>
<th>Percentage</th>
</tr>
<tr>
<td>Assignment</td>
<td>:</td>
<td>40%</td>
</tr>
<tr> https://www.w3schools.com/tags/tryit.asp?file
name=tryhtml_table_span
<td>Test</td>
<td>:</td>
<td>50%</td>
</tr>
<tr>
<td>Exercises</td>
<td>:</td>
<td>10%</td>
</tr>
</table> 25
 XP
Spanning Rows and Columns (continued 3)

26
Spanning Rows and Columns (continued 2)
XP

27
Creating a Table Caption XP

• Marked using the caption element

<caption>content</caption>
where content is the content contained
within the caption
• Listed immediately after the <table> tag
• Only one caption is allowed per web table
• Inherits the text styles associated with the
table

28
Creating a Table Caption (continued 1)XP
• By default, captions are placed above the
tables
• To specify the location, use the caption-side
property
caption-side: position;
where position is either top or bottom

29
 XP

https://www.
w3schools.c
om/css/tryit.
asp?filename
=trycss_table
_caption-sid
e
30
 Creating Row Groups XP

• Row groups contain specific table information

• Allows to create different styles for groups of
rows
• HTML supports three row groups
– Rows that belong to the table head
o Marked using thead element
– Rows that belong to the table footer
o Marked using tfoot element
– Rows that belong to the table body
o Marked using tbody element
31
Creating Row Groups (continued 1) XP

• The general structure of a web table divided

into row groups
<table>
<thead>table rows</thead>
<tfoot>table rows</tfoot>
<tbody>table rows</tbody>
</table>
• Only one thead and tfoot element is allowed
per table

32
 XP
https://www.w3schools.com/t
ags/tag_tbody.asp

https://
www.w3schools.com/code/tryit.asp?filename=GO8OAGEQLS
V3

33
 RowGroup.html
<table border="1" style="width:300px">
XP
<thead>
<tr><th colspan="3"> ABC Company </th></tr>
<tr> <th>Name</th> <th>Department</th> <th>Telephone</th> </tr>
</thead>
<tfoot>
<tr> <td colspan="3"Total : 3 employees</td></tr>
</tfoot> https://www.w3s
<tbody> chools.com/tags/
tag_tbody.asp
<tr> <td>Jack</td><td>Sales</td> <td>555-5555</td></tr>
<tr> <td>John</td> <td>Admin</td> <td>555-5555</td></tr>
<tr> <td>James</td> <td>Sales</td> <td>555-5555</td> </tr>
<tbody>
</table>
https://
www.w3schools.com/code/tryit.asp
?filename=GOG8ZZR5MVD0
34
Creating Column Groups XP

• Columns are determined implicitly based on

the number of cells within the table rows
• Columns are identified by the col element
• To identify individual columns, use the id
and/or class attributes

35
Creating Column Groups (continued 1)XP
• Columns can be referred using the following
colgroup element:
<table> https://www.w3schools
.com/tags/tag_colgroup
<colgroup> .asp
columns
</colgroup>
table rows
</table>
where columns are the individual columns
defined within the group
36
<style>
table, th, td { border: 1px solid black; }
</style> XP
:
<body>
<h1>The colgroup element</h1>
<table>
https://www.w3schools
<colgroup> .com/tags/tag_colgroup
<col span="2" style="background-color:red"> .asp
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table></body>
37
Creating Column Groups (continued 2)XP
• Columns and column groups accept only CSS
style properties to modify
– column borders
– background
– width
– visibility

38
XP

39
XP

40
<head><title>column group </title> Columngroup .html
<style type="text/css"> XP
col#firstcolgp { color: blue}
col.othercolgp {color: green}
</style></head>
<body>
<table>
<colgroup> https://www.w3sch
<col id="firstcolgp" /> ools.com/tags/tag_
<col class="othercolgp" span="2"/> colgroup.asp
</colgroup>
<tr><td>column 1</td><td>column 2</td><td>column 3</td></tr>
<tr><td>column 1</td><td>column 2</td><td>column 3</td></tr>
</table>
Exploring CSS Styles and Web Tables XP

• Levels of precedence in the table styles in decreasing

order
– Table cells (highest)
– Rows
– Row groups
– Columns
– Column groups
– Table (lowest)

42
<!DOCTYPE html>
<html>
<head> XP
<style>
table, th, td { border: 1px solid black;}
</style>
</head>
<body>
<h1>The colgroup element</h1>
<table style="background-color:pink">
<colgroup>
<col style="background-color:red">
<col span="2" style="background-color:yellow">
</colgroup>
<tr style="background-color:purple" >
<th>ISBN</th>
<th>Title</th>
<th style="background-color:green" >Price</th>
</tr>
<tr> https://w
<td>3476896</td> ww.w3sc
<td>My first HTML</td> hools.co
m/code/tr
<td style="background-color:green" >$53</td> yit.asp?fil
</tr> ename=G
<tr> OG8X0P
TPMZC
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table></body></html>
43
Working with Width and Height XP

• By default, browsers attempt to fit more content in each column before wrapping
the cell text
• Extra space is divided equally among columns if the width of a table is larger than
its individual columns
• Column widths are set using the width property
https://www.w3schools.com/tags/att_td_width.asp
https://www.w3schools.com/tags/att_col_width.asp

44
Working with Width and Height XP
https://www.w3schools.com/tags/att_td_height.asp
(continued 1) https://www.w3schools.com/tags/att_td_valign.asp

• The height of each row is based on the height of the tallest cell
• A uniform row height is defined by applying the height style to table rows
within each row group
• The vertical-align property is used to move the cell text

45
Applying Table Styles to Other Page XP
Elements
• Apply a table layout to other HTML elements using
the CSS display property

46
<head> Display.html
<style type="text/css"> XP
dl {display: table ; border-collapse: separate ; width: 100%}
dl div { display: table-row }
dd, dt { display: table-cell ; border: 1px solid black ; padding: 5px;
vertical-align: bottom }
</style>
</head>
<body>
<dl>
<div>
<dt>item A </dt><dd> description of item A</dd>
</div>
<div>
<dt>item B </dt><dd> description of item B</dd>
</div>
</dl>
</body>

https://
www.w3schools.com/code/tryit.asp?fil 47
Tables and Responsive Design XP

• Tables do not scale well to mobile devices

• Problems faced by users to view a table in a
mobile device
– Table is too small to read
– Table does not fit the visual viewport
– Table columns are too narrow to read the cell
content

48
Tables and Responsive Design (continued 1)XP

49
XP

50
Tables and Responsive Design (continued 2)XP
• A new layout of table data for mobile screens is required
• Several table columns are reduced to two:
– One column containing all data labels
– Second column containing data associated with each label

51
Tables and Responsive Design (continued 3)XP
• To create a responsive web table, add the text
of data labels as attributes of all td elements
in the table body
• Store data labels using a data attribute
• General format of a data attribute is
data-text=“value”
where text is the name of the data attribute
and value is its value

52
Tables and Responsive Design (continued 4)XP
• Data attributes use names specific to the
function it is used for
• For example, the following code uses a data
attribute named data-label to store the text
of the labels associated with the data cell:
<td data-label=“Date”>
April 2,2017
</td>

53
Tables and Responsive Design (continued 5)XP
• The result is a list of data cells that are aligned
as block elements
• Within each block element, the data label is
followed by the data cell content
• The goal is to transform table with multiple
columns into two-column layout

54
XP

55
<head>
<link href="tableforphone.css" rel="stylesheet" />
</head> XP
<body>
<table> <caption>Statement Summary</caption>
<thead>
<tr>
<th style="height: 23px">Account</th>
<th style="height: 23px">Due Date</th>
<th style="height: 23px" >Amount</th>
<th style="height: 23px">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
:
:
</tbody> </table>
Phone table .html tableforphone.css 56
body { font-family: "Open Sans", sans-serif; line-height: 1.25; } tableforphone.css
table { border: 1px solid #ccc; border-collapse: collapse; XP
margin: 0; padding: 0; width: 100%; table-layout: fixed; }
table caption { font-size: 1.5em; margin: .5em 0 .75em; }
table tr { background: #f8f8f8; border: 1px solid #ddd; padding: .35em; }
table th, table td { padding: .625em; text-align: center; }
table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; }

@media screen and (max-width: 600px) {

table { border: 0; }
table caption { font-size: 1.3em; }
table thead { border: none; clip: rect(0 0 0 0); height: 1 px; margin: -1px; overflow:
hidden; padding: 0; position: absolute; width: 1 px; }
table tr { border-bottom: 3px solid #ddd; display: block; argin-bottom: .625em; }
table td { border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align:
right; }
table td:before {
/* aria-label has no advantage, it won't be read inside a table content: attr(aria-label); */

content: attr(data-label);
float: left; font-weight: bold; text-transform: uppercase; }
}
57
<head> Phone table.html body { font-family: "Open Sans", sans-serif; line-heig
<link href="tableforphone.css" rel="stylesheet" /> 1.25; }
</head> : XP
tableforph
<body> @media screen and (max-width: 600px) {
<table> <caption>Statement Summary</caption> table { border: 0; }
<thead>
<tr>
table caption { font-size: 1.3em; }
<th style="height: 23px">Account</th> table thead { border: none; clip: rect(0 0 0 0); he
<th style="height: 23px">Due Date</th> 1 px; margin: -1px; overflow: hidden; padding: 0
<th style="height: 23px" >Amount</th> position: absolute; width: 1 px; }
<th style="height: 23px">Period</th> table tr { border-bottom: 3px solid #ddd : block; ma
</tr> bottom: 0.625em; }
</thead> table td { border-bottom: 1px solid #ddd; display: b
<tbody>
<tr>
font-size: 0.8em; text-align: right; }
<td data-label="Account">Visa - 3412</td> table td:before {
<td data-label="Due Date">04/01/2016</td> /* aria-label has no advantage, it won't be read insid
<td data-label="Amount">$1,190</td> table content: attr(aria-label); */
<td data-label="Period">03/01/2016 - content: attr(data-label);
03/31/2016</td> float: left; font-weight: bold; text-transform: upper
</tr> }
:
</tbody> </table>
} table thead {display:none; }

58
Clipping an Element (chapter 4 CSS part 2) XP

clip: rect(top, right, bottom , left);

https://
www.w3scho
ols.com/cssref
/pr_pos_clip.a
sp

59
 XP

DESIGNING FOR THE MOBILE

/TABLET/DESKTOP COMPUTER

60
 XP

CREATING A MOBILE DESIGN

61
Designing for the Mobile Web XP

• Notice that the mobile

device has automatically
zoomed out to display the
complete page width
resulting in text that is
difficult to read and small
hypertext links that are
practically unusable with a
touch interface.

• While the design might be

fine for a desktop monitor
in landscape orientation, it’s
clear that it is ill-suited to a
mobile device.
Figure 5-2, 62
 XP

tf_styles1.css
tf_home.html
63
 XP

• What this website requires is a design that is not only specifically tailored to the
needs of her mobile users but also is easily revised for tablet and desktop devices.
This can be accomplished with responsive design in which the design of the
document changes in response to the device rendering the page. An important
leader in the development of responsive design is Ethan Marcotte, who identified
three primary components of responsive design theory:
• flexible layout so that the page layout automatically adjusts to screens of
different widths
• responsive images that rescale based on the size of the viewing device
• media queries that determine the properties of the device rendering the page so
that appropriate designs can be delivered to specific devices
• In the preceding tutorials, you’ve seen how to create grid-based fluid layouts and
you’ve used images that scaled based on the width of the browser window and
web page. In this session, you’ll learn how to work with media queries in order to
create a truly responsive website design.

64
Applying Media Queries to a Style Sheet
XP
tf_home.html tf_styles1.css

65
 XP

tf_home.html
tf_styles1.css

66
• Web pages are viewed within a window called the
viewport. For desktop computers, the viewport is the XP
same as the browser window; however, this is not the
case with mobile devices.

• Mobile devices have two types of viewports: a visual

viewport displaying the web page content that fits within
a mobile screen and a layout viewport containing the
entire content of the page, some of which may be
hidden from the user.

• The two viewports exist in order to accommodate

websites that have been written with desktop computers
in mind. A mobile device will automatically zoom out of
a page in order to give users the complete view of the
page’s contents, but as shown earlier in Figure 5-2, this
often results in a view that is too small to be usable.

• While the user can manually zoom into a page to make it

readable within the visual viewport, this is done at the
expense of hiding content

Figure 5-2, 67
 XP

Configuring the Layout Viewport

• To configure the properties of the layout viewport for use with media
queries, add the following meta element to the HTML file
<meta name=”viewport” content=”properties” />
where properties is a comma-separated list of viewport properties and their values.
• To size the layout viewport so that it matches the width of the device
without rescaling, use the following viewport meta element
<meta name=”viewport” content= “width=device-width, initial-scale=1” />

sets the initial zoom level

when the page is first
loaded by the browser.

https://www.w3schools.com/
css/css_rwd_viewport.asp

68
tf_home.html XP

tf_styles1.css 69
Creating a Mobile tf_home.html
XP
Design ul.submenu { display: none;} tf_styles1.css

Creating a Pulldown Menu with CSS

70
 tf_styles1.css
XP
Displaying the hidden submenus tf_home.html
a.submenuTitle:hover+ul.submenu, ul.submenu:hover { display: block; }

71
tf_home.html
XP
tf_styles1.css

72
 : tf_home.html
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="tf_reset.css" rel="stylesheet" />
<link href="tf_styles1.css" rel="stylesheet" />
XP
</head>
<body>

@charset "utf-8"; tf_styles1.css

/* HTML and Body Styles */
html {
background: url(tf_back1.png) center center / cover no-repeat fixed;
:

/* Pulldown Menu Styles */

ul.submenu { display: none;}
a.submenuTitle:hover+ul.submenu, ul.submenu:hover { display: block;}

@media only screen and (max-width: 480px) {

nav.horizontal a { font-size: 1.5em; line-height: 2.2em; }
aside { display: none; }
}

@media only screen and (min-width: 481px) {

ul.mainmenu > li { float: left; position: relative; width: 20%; }
ul.submenu { box-shadow:5px 5px 10px 20px white ;
position: absolute; width: 200%; }
}

@media only screen and (min-width: 769px) {

ul.submenu { background: transparent; box-shadow: none;
display: block; position: relative; width: 100%; }
nav.horizontal::after { clear: both; content: ""; display: table; }
nav.horizontal a.submenuTitle { display: none; }
article { float: left; margin-right: 5%; width: 55%; }
aside { float: left; width: 40%; }
} 73
 XP

CREATING A TABLET DESIGN

74
Applying Media Queries to a Style Sheet tf_home.htm
XP
tf_styles1.css

75
Creating a Tablet Design tf_home.html tf_styles1.css
XP

76
 https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow
XP

• box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

77
 XP
tf_styles1.css
tf_home.html

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
https://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

78
 XP

CREATING A DESKTOP DESIGN

79
Creating a Desktop Design
XP

tf_styles1.css
tf_home.html

80
 tf_home.html
:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="tf_reset.css" rel="stylesheet" />
<link href="tf_styles1.css" rel="stylesheet" />
XP
</head>
<body>

@charset "utf-8"; tf_styles1.css

/* HTML and Body Styles */
html {
background: url(tf_back1.png) center center / cover no-repeat fixed;
:

/* Pulldown Menu Styles */

ul.submenu { display: none;}
a.submenuTitle:hover+ul.submenu, ul.submenu:hover { display: block;}

@media only screen and (max-width: 480px) {

nav.horizontal a { font-size: 1.5em; line-height: 2.2em; }
aside { display: none; }
}

@media only screen and (min-width: 481px) {

ul.mainmenu > li { float: left; position: relative; width: 20%; }
ul.submenu { box-shadow:5px 5px 10px 20px white ;
position: absolute; width: 200%; }
}

@media only screen and (min-width: 769px) {

ul.submenu { background: transparent; box-shadow: none;
display: block; position: relative; width: 100%; }
nav.horizontal::after { clear: both; content: ""; display: table; }
nav.horizontal a.submenuTitle { display: none; }
article { float: left; margin-right: 5%; width: 55%; }
aside { float: left; width: 40%; }
} 81
 XP

FLEXIBLE BOX

82
tf_flex.css
tf_prek.html XP

A flexible box or flexbox is a box containing item

sizes can shrink or grow to match the boundaries o
box. Thus, unlike a grid system in which each item
defined size, flexbox items adapt themselves autom
to the size of their container. This makes flexboxes
tool for designing layouts that can adapt to differe
83
sizes.
 Introducing Flexible Boxes
XP
tf_flex.css
tf_prek.html

ow;
;

Defining a Flexbox
• To display an element as a flexbox, apply the display style
display: flex;
• To set the orientation of the flexbox, apply the style
flex-direction: direction; • https://www.w3
where direction is row (the default), column, row-reverse, or column-reverse. box.asp
• To define whether or not flex items wrap to a new line, apply the style • https://
flex-wrap: type; www.w3schools.
ntainer.asp
where type is either nowrap (the default), wrap to wrap flex items to a new line, or wrap-reverse to
• https://
wrap flex items to a new line starting in the opposite direction from the current line. www.w3schools.
• To define the flow of items within a flexbox, apply the style e=trycss3_flexbo
flex-flow: direction wrap;
where direction is the direction of the flex items and wrap defines whether the items will be wrapped to
a new line when needed. 84
 XP

https://www.w3schools.com/css/cs
s3_flexbox_container.asp

https://www.w3schools.com/css/cs
s3_flexbox.asp 85
 XP

120 px

361 px

https://www.w
3schools.com/c
ss/css3_flexbox
.asp

tf_prek.html tf_flex.css 86
 Sizing Flex Items
XP
• To set the initial size of a flex item, apply the style
flex-basis: size;
where size is measured in one of the CSS units of measurement or as a percentage
of the size of the flexbox or the keyword auto (the default).
• To define the rate at which a flex item grows from its basis size, apply the style
flex-grow: value; default  0
where value is a non-negative value that expresses the growth of the flex item
relative to the growth of the other items in the flexbox (the default is 0).
• To define the rate at which a flex item shrinks below its basis value, apply
flex-shrink: value; default1
where value is a non-negative value that expresses the shrink rate of the flex item
relative to other items in the flexbox (the default is 1).
• To define the overall resizing of a flex item, apply
flex: grow shrink basis;
where grow defines the growth of the flex item, shrink provides its shrink rate, and
basis sets the item’s initial size.

• https://www.w3schools.com/css/css3_flexbox.asp
• https://www.w3schools.com/css/css3_flexbox_container.asp
• https://www.w3schools.com/css/css3_flexbox_items.asp 87
 XP

• https://www.w3schools.com/css/css3_flexbox.asp
• https://www.w3schools.com/css/css3_flexbox_container.asp
tf_flex.css • https://www.w3schools.com/css/css3_flexbox_items.asp
tf_prek.html 88
 XP
flex: auto;
https://www.w3schools.com/css/cs
s3_flexbox.asp flex: 1 1 auto;
flex: 1 1 120px;

flex: 0 1 auto

89
 tf_flex.css

XP
tf_prek.html
https://www.w3schools.com/css/tr
me=trycss3_flexbox_website2

<section id=“topics” >

200px

90
 tf_flex.css
tf_prek.html
XP
Reordering a Flex Item
• To reorder a flex item, apply the style
order: value;
where value is an integer where items with smaller order values are placed
before items with larger order values.
https://www.w3schools.com/
css/tryit.asp?filename=trycss
3_flexbox_order_2

91
Creating a Navicon Menu XP

92
tf_prek.html
tf_flex.css
tf_navicon.css XP

93
 XP

DESIGNING FOR PRINTED MEDIA

94
Designing for Printed Media XP

tf_print.css

tf_articles.html

https://www.w3scho
ols.com/cssref/tryit.a
sp?filename=trycss3
_word-wrap

95
 XP

https://www.w3schools.com/tags/att_
link_media.asp
tf_articles.html

https://www.w3schools.com/css/tryit.asp?filename=trycss_media

tf_print.css
96
https://www.w3schools.com/tags/att_
link_media.asp XP

97
 XP

https://www.w3schools.com/css/t
ryit.asp?filename=trycss_media
98
Creating and Applying Page Styles XP
• To define a page box for the printed version of a document, use the CSS rule
@page { size: width height; }
where width and height are the width and height of the page.

• To create a named page for specific page styles, apply the rule
@page name { style rules }
where name is the label assigned to the page style.

• To apply a named page style, use the rule

selector { page: name; }
where selector identifies the element that will be displayed on its own page, and name is the
name of a previously defined page style.

Same

blockquote {
margin:10cm;
}
99
 XP

tf_articles.html tf_print.css

100
tf_print.css tf_articles.html

XP

101
 XP
https://www.w3schools.com/cssr
ef/tryit.asp?filename=trycss3_wo
rd-wrap

tf_articles.html tf_print.css

102
 Adding a Page Break
• To set the page break style directly before an element, apply the property
page-break-before: type;
XP
where type is always, avoid, left, right, auto, or inherit.
• To set the page break style directly after an element, apply
page-break-after: type;

tf_articles.html tf_print.css

After the first article, you wants each subsequent article

to start on a new page. To select every article after the
initial article, use the selector article:nth-of-type(n+2)
which selects the second, third, fourth, and so on article
elements in the document . article

To ensure that each of the selected articles starts on a

new page, insert the page break before the article using
the following style rule:
article:nth-of-type(n+2) { page-break-before: always; }
103
Preventing Page Breaks inside an Element XP
• To prevent a page break from occurring within
an element, apply the style:
page-break-inside: avoid; tf_articles.html tf_print.css

Page 1
1. coffee
2. Tea
Page 2
3. orange juice

104
Working with Widows and Orphans
tf_print.css tf_articles.html
• Page breaks within block elements, such as paragraphs, can often leave behind widows and orphans.
•
XP
A widow is a fragment of text left dangling at the top of page, while an orphan is a text fragment left at
the bottom of a page.
• Widows and orphans generally ruin the flow of the page text, making the document difficult to read. To
control the size of widows and orphans
• To set the minimum size of widows (lines stranded at the top of a page), apply the property
widows: value;
where value is the number of lines that must appear at the top of the page before the page break.

105
Working with Widows and Orphans
• To set the minimum size of orphans (lines stranded at the bottom of a page), apply XPthe
property
orphans: value; tf_articles.html tf_print.css

where value is the number of lines that must appear at the bottom of the page
before the page break. (An integer that specifies the minimum number of visible lines.
Negative values are not allowed. The default value is 2)

106