Chapter 4 – Creating Tables in a Web Site Using an External Style Sheet
MULTIPLE CHOICE
1. ____ are useful when you want to arrange text and images in order to make the information
straightforward and clear to the Web page visitor.
a.
Indices
c.
Animations
b.
Flowcharts
d.
Tables
2. The ____ of a table helps to define what formatting is appropriate.
a.
dimension
c.
size
b.
resolution
d.
purpose
3. Tables allow you to organize information on a Web page using HTML ____.
a.
keylinks
c.
indices
b.
flowcharts
d.
tags
4. An embedded style sheet is inserted between the ____ tags of a single Web page within the style
container.
a.
<body> and </body>
c.
<html> and </html>
b.
<head> and </head>
d.
<style> and </style>
5. Which of the following is the preferred method for structuring Web sites?
a.
headers
c.
tables
b.
frames
d.
CSS
6. Tables are similar in design to ____.
a.
spreadsheets
c.
documents
b.
presentations
d.
databases
7. A heading cell displays text as bold and ____.
a.
left-aligned
c.
right-aligned
b.
center-aligned
d.
justified
8. You can set ____ for an entire row of information, for a single cell, or for one or more cells within a
row.
a.
links
c.
attributes
b.
keys
d.
indices
9. ____ consist of rows, columns, and cells.
a.
Indices
c.
Flowcharts
b.
Tables
d.
Animations
10. A(n) ____ is a horizontal line of information in a table.
a.
column
c.
row
b.
grid
d.
baseline
11. A ____ is a vertical line of information in a table.
a.
column
c.
row
b.
grid
d.
baseline
12. A(n) ____ is the intersection of a row and a column.
a.
apex
c.
index
b.
cell
d.
chart
13. A(n) ____ cell displays normal text that is left-aligned.
a.
data
c.
heading
b.
index
d.
baseline
14. A table ____ is any cell with bold text that indicates the purpose of the row or column.
a.
caption
c.
glossary
b.
key
d.
header
15. A caption can be placed ____ a table.
a.
to the left of
c.
above
b.
to the right of
d.
all of the above
16. The process for creating tables for a Web page includes ____.
a.
determining if a table is needed; planning the table; and coding the table
b.
determining if a table is needed; planning the table; linking the table; and coding the table
c.
determining if a table is needed; coding the table; and formatting the table
d.
determining if a table is needed; formatting the table; planning the table; and coding the
table
17. The first step in creating a table is to ____.
a.
code the table
c.
determine if a table is needed
b.
format the table
d.
plan the table
18. Conceptualizing a table on paper first saves time trying to determine which HTML table ____ to use to
create the table.
a.
keylinks
c.
flowcharts
b.
indices
d.
tags
19. The ____ tags indicate the start and end of table rows.
a.
<td></td>
c.
<th></th>
b.
<tc></tc>
d.
<tr></tr>
20. The ____ tags indicate the start and end of a row with table heading cells.
a.
<td></td>
c.
<th></th>
b.
<tc></tc>
d.
<tr></tr>
21. The ____ tags indicate the start and end of a row of data cells.
a.
<td></td>
c.
<th></th>
b.
<tc></tc>
d.
<tr></tr>
22. The ____ tag indicates the start and end of a table.
a.
<tr> </tr>
c.
<table> </table>
b.
<t> </t>
d.
<tab> </tab>
23. The ____ tags allow the use of the rowspan, colspan, and headers attribute.
a.
<tr> and <th>
c.
<th> and <td>
b.
<td> and <tr>
d.
<td> and <tt>
24. The ____ tag does not have any attributes still in use.
a.
<tr>
c.
<td>
b.
<table>
d.
<th>
25. The ____ tag uses the border attribute.
a.
<table>
c.
<tr>
b.
<td>
d.
<th>
26. Which of the following table properties specifies whether or not table border should have their own
border, or share a common border?
a.
independent-border
c.
border-share
b.
common-border
d.
border-collapse
27. Which of the following table properties specifies the distance between the borders of adjacent cells?
a.
border-distance
c.
border-display
b.
adjacent-border
d.
border-spacing
28. Which of the following table properties specifies the placement of a table caption?
a.
caption-placement
c.
caption-side
b.
caption-position
d.
caption-option
29. Which of the following table properties set the layout algorithm to be used for a table?
a.
table-layout
c.
table-algorithm
b.
table-display
d.
table-position
30. The ____ table property takes the following values: auto, fixed, and inherit.
a.
table-layout
c.
border-collapse
b.
caption-side
d.
border-spacing
31. The ____ table property takes the following values: separate, collapse, and inherit.
a.
table-layout
c.
empty-cells
b.
border-collapse
d.
caption-side
32. The ____ table property takes the following values: not specified, length, and inherit.
a.
table-layout
c.
border-spacing
b.
caption-side
d.
border-collapse
33. The ____ property allows designers to easily implement multiple drop shadows (outer or inner) on box
elements, specifying values for color, size, blur, and offset.
a.
drop-shadow
c.
multiple-shadow
b.
outer-shadow
d.
box-shadow
34. Changing the ____ of an image can cause the image to look distorted on the Web page.
a.
resolution
c.
width
b.
dimension
d.
style
35. ____ specifies the distance between the borders of adjacent cells in a table.
a.
Border spacing
c.
Cell width
b.
Padding
d.
Cell height
36. ____ is shorthand to set the top, right, bottom, and left space around an element.
a.
Border spacing
c.
Cell width
b.
Padding
d.
Cell height
37. The colspan attribute of the ____ tag sets a number of columns spanned by a cell.
a.
<td>
c.
<tr>
b.
<th>
d.
both a and b
38. Captions are recommended for tables that are used to ____.
a.
structure columns and rows of information
b.
position images
c.
create menu bars
d.
all of the above
39. If you decide to add row or column ____, it is best to sketch your ideas on paper first.
a.
scanning
c.
spanning
b.
titles
d.
anchors
40. The default option of the ____ tag is for the text in the cells to be left-justified.
a.
<td>
c.
<tr>
b.
<th>
d.
<tl>
MULTIPLE RESPONSE
Modified Multiple Choice
1. Properties and attributes are set relative to the ____ elements in a table.
a.
line
c.
row
b.
column
d.
cell
2. Text in a data cell appears ____.
a.
italicized
c.
left-justified
b.
normal
d.
justified
3. A table caption is descriptive text located ____ a table that further describes the purpose of the table.
a.
above
c.
to the left of
b.
below
d.
to the right of
4. Tables include features such as ____.
a.
resolutions
c.
borders
b.
captions
d.
headers
5. Creating tables for a Web page always includes ____.
a.
determining if a table is needed
c.
coding the table
b.
captioning the table
d.
planning the table
MODIFIED TRUE/FALSE
1. Tables consist of rows, columns, and cells, much like text files. _________________________
2. The border-display table property specifies whether or not display borders and background on empty
cells in a table. _________________________
3. The size value of the box-shadow property specifies the size of the shadow.
_________________________
4. The most beneficial feature of the internal style sheet is that you can easily change the appearance of
all Web pages into which the style sheet is linked just by changing the style sheet.
_________________________
5. When a table is used to structure columns and rows of information, bordered tables are most
appropriate. _________________________
TRUE/FALSE
1. You cannot apply a background color to a table cell.
2. Tables can be simple, with a basic grid format and no color.
3. Tables cannot be used to position text and images.
4. An advantage to wrapping text around an image, instead of using a table, is that you have more control
over the placement of the text and the image.
5. The purpose for a table dictates which features are used.
6. Creating tables for a Web page is a two-step process: (1) determining if a table is needed; and (2)
coding the table.
7. The first step in creating a table is to code the table.
8. All Web pages require the use of tables.
9. A general rule is that a table should be used when it will help organize information or Web page
elements in such a way that it is easier for the Web page visitor to read.
10. To create effective tables, you must begin by planning how the information will appear in the table and
create a good design.
11. After a table is sketched on paper, it is easier to see how many rows and columns to create, if the table
will include headings, and if any of the headings span rows or columns.
12. Studies have been conducted to assess the best location on a Web page to place navigation bars and
lists, with the results indicating that the top of the Web page is best in terms of visitor usability.
13. To create an external style sheet, enter all of the style statements in a text file using Notepad++ or
another text editor, and then save the text file with a .css extension.
14. The format of an external style sheet is very different from the format of an embedded style sheet.
15. Consider using external styles for any style that is unique for a single element, such as when you want
one word or paragraph and one Webpage to look different than all others.
16. If you want to change a style, when you change it in the external (linked) stylesheet, it automatically
takes effect in any Web page that is linked to the external style sheet.
17. Tables with borders are most appropriate when the tables are used to position text and image elements.
18. If you add border spacing, you give more space around the content within a cell.
19. When a table uses the spacing and padding styles, the size of each data cell is automatically set to the
minimum size needed for the text inserted in the data cell.
20. With the flexibility of inline styles, you can adjust the border spacing and padding at the table header
or table data cell level.
21. Tables used to structure columns and rows of information can benefit from having an index to clarify
the contents of the table.
22. If the content in a table is broken into logical segments of information, you should not use row or
column spanning.
23. You can help visitors more easily read a table full of information by varying the background colors
effectively.
24. Before using row or column spanning, it is best to sketch your ideas on paper first.
25. Given an external style sheet named styles1.css, the code <link rel=”stylesheet” type=”text/css”
href=”styles1.css” /> will link the HTML file in which this code appears to that style sheet.
COMPLETION
1. ____________________ established a major change in how tables are formatted.
2. A table ____________________ is the line that encloses the perimeter of the table.
3. A table ____________________ is descriptive text located above or below the table that further
describes the purpose of the table.
4. There are ____________________ main HTML tags used to create a table.
5. All tags for a table are inserted within the <____________________> tags.
6. Generally, companies utilize the same ____________________ on their Web site as they use on print
material associated with the company, such as business cards and letterheads.
7. The ____________________ table property specifies the following values: top, bottom, and inherit.
8. The ____________________ value of the box-shadow property determines the position of the vertical
shadow.
9. The ____________________ value of the box-shadow property changes the shadow from an outer
shadow to an inner shadow.
10. With the blur value of the box-shadow property, if the blur distance is set to ____________________
the shadow will be sharp.
11. All external style sheets must be saved with the file name extension of ____________________.
12. Classes are named with a(n) ____________________ after the element is defined.
13. ____________________ tables often are appropriate when the tables are used to position text and
image elements.
14. Additional ____________________ makes the borders around each cell look thicker.
15. A table is modified to use border spacing and padding by adding an inline style to the
<____________________> tag.
16. The ____________________ attribute of the <th> or <td> tag sets the number of rows spanned by a
cell.
17. The ____________________ attribute of the <th> or <td> tag sets the number of columns spanned by
a cell.
18. By default, a caption will be centered ____________________ the table.
19. Tables used to structure columns and rows of information can benefit from having a(n)
____________________ to clarify the contents of the table.
20. To quit Notepad++, click the ____________________ button on the Notepad++ title bar.
MATCHING
Identify the letter of the choice that best matches the phrase or definition.
a.
<td> </td>
f.
<th> </th>
b.
stylesheet
g.
table
c.
browser
h.
border
d.
spanning
i.
cellspacing
e.
caption
j.
row
1. You can use this to create Web pages with newspaper-type columns of text or structured lists of
information
2. A horizontal line of information in the table
3. Tags that indicate the start and end of a data cell in a table
4. The first row in a table includes table heading cells, as indicated by these tags
5. An attribute that can have a value of “1” or ” ” only
6. After an HTML file for a Web page is saved, it should be viewed in this to confirm that the page
appears as desired and that the links function as expected
7. Using the border-spacing property with an inline style replaces this attribute in HTML5
8. The value of the <link /> tag for linking an external stylesheet to a Web page
9. Descriptive text located above or below the table that further describes the purpose of the table
10. A technique used frequently to create a heading that goes across rows or columns
ESSAY
1. List the CSS properties and values that can be used to style tables, along with a description of those
properties and their values.
2. Explain what an external style sheet is and what its major benefit is.
3. How do you determine if a caption is needed for a table?
CASE
Critical Thinking Questions
Case 4-1
Kathryn wants to learn how to create Web pages with tables, so she has asked her colleague Mary to
explain how they work.
1. Mary tells Kathryn that tables can be used for a variety of purposes. Which of the following is NOT a
true statement that Mary can make about tables on a Web page?
a.
They can be used to create Web pages
with newspaper-type columns of text.
c.
They can be used to create a layout on a
Web page.
b.
They provide more control over the
placement of text and images than is
possible by just wrapping text around an
image.
d.
They must always have a visible border.
2. Kathryn wants to add text that identifies the purpose of a table as a whole. What type of table feature
should she use?
a.
a table border
c.
a table header
b.
a table caption
d.
a table rule
Critical Thinking Questions
Case 4-2
Kathryn has mastered the basics of creating tables, but now she wants to take her design to the next
level. She has more specific questions for Mary about some of the advanced features of HTML table
design?
3. Mary is teaching Kathryn how to add extra spacing to a table on a Web page. She first explains how to
specify the distance between the borders of adjacent cells in a table. Which property is used for that
purpose?
a.
border-spacing
c.
adjacent-cells
b.
cell-border
d.
near-cells
4. Kathryn wants to specify the amount of space around the content within a cell. Which property should
she use for that purpose?
a.
border spacing
c.
content space
b.
padding
d.
valign