Tutorial 06: Working with Tables and Columns
Andy wants the borders to be distinctly visible for each cell in the product details table. Which of the following properties must Andy add to his code to accomplish his goal? a. border-spacing: length; b. border-collapse: separate; c. border-collapse: collapse; d. border-spacing: initial;
b
The two types of table cells supported by web tables are _____. a. row cells and column cells b. header cells and data cells c. border cells and caption cells d. legend cells and web cells
b
Which of the following HTML elements is used to add a row in a table? a. <td> b. <tr> c. <dd> d. <tl>
b
Which of the following HTML structures arranges text in multiple rows and columns? a. <div> b. <table> c. <span> d. <nav>
b
Which of the following properties helps Luis in making the content on the web page more readable by spreading the content into a specific number of columns on a single page? a. column-span; b. column-count; c. column-collapse; d. column-control;
b
When creating row groups, the table _________ group appears after the table footer group to allow browsers to render the footer before receiving numerous groups of table body rows.
body
The default browser style for header cells is to display the text of the header in bold font and _____ within the cell. a. left-aligned b. right-aligned c. centered horizontally d. positioned vertically
c
Which of the following HTML elements is used to create header cells in a web table? a. <tr> b. <td> c. <th> d. <head>
c
Which of the following styles sets the column breaks within paragraphs to leave a minimum of two and three lines at the top and bottom of each column respectively? a. article p { break-before: always; } b. article p { break-before: always; } c. article p { orphans: 3; widows: 2; } d. article p { break-inside: auto; }
c
In HTML, to specify the caption location for a web table the _________ property is used.
caption-side
Identify a CSS property to place a table caption.
caption-side: position;
In _________ borders model, borders from adjacent elements are merged together to form a single border in a new style that combines features of both the borders.
collapsed
The _____ attribute is added to a <td> element to create a cell that spreads across several cells vertically.
colspan
Which of the following HTML attributes is used to create a single cell that occupies more than one cell from a series of horizontal cells?
colspan
Which of the following is an equivalent HTML element for display: table-cell; style?
<th>
Which of the following is true of row groups that are defined in an HTML table?
A table can contain only one thead and tfoot element but can have numerous tbody elements.
Identify the first step to create a responsive web table that relies only on CSS.
Add a text of data labels as attributes of all of the td elements in the table body.
_________ are the layouts in which content is displayed side-by-side in a page and differs from those layouts that use floating elements or flexboxes.
Column layouts
It acts like the basis value for items in a flexbox.
Column width
They are often used for database applications that read the contents of HTML files.
Data attributes
A web table can contain any number of thead and tfoot elements but only one tbody element.
False
Spanning cells are created by adding div attributes to either td or th element.
False
For widows property widows: value; value is the minimum number of lines stranded before a column break.
False - after a column break
The th element is used to mark the data cells.
False - header cells
HTML supports three row groups, which define rows that belong to the table head, table border, or table body.
False - table footer
Which of the following is a default value for border-collapse property? a. border-collapse: separate; b. border-collapse: collapse; c. border-collapse: inherit; d. border-collapse: initial;
a
Which of the following is true of class in the table tag <table class=" ">? a. class is an attribute. b. class is an tag. c. class is an function. d. class is an label.
a
Which of the following properties must Andy use to set the gap between the borders created by using the border-collapse property? a. border-spacing: value; b. border-spacing: value; c. border: length; d. border: width;
a
By default, a browser places a table caption _____.
above the table
The given figure is an example of the _____ borders model.
separate
When two adjacent 1-pixel-wide borders are collapsed together, the width of the resulting border is _____.
1-pixels
Which of the following HTML elements is used to create a table title?
<caption>
The columns within the colgroup element are identified by the _____ element.
<colspan="value"/>
Write an HTML code to create a table with three rows and two columns. Add appropriate headers and enter the data into the table.
<table border="1"> <tr> <th>Name</th> <th>Roll No</th> </tr> <tr> <td>Andy</td> <td>34</td> </tr> <tr> <td>Anish</td> <td>35</td> </tr> </table>
Which of the following HTML tags is used to set the width of a table border?
<table border="value">
Only one caption is allowed per web table, and the caption element must be listed directly after the opening _________ tag.
<table>
Explain table row group elements and the order that should be maintained when writing an HTML code.
HTML supports three row group elements, which define rows that belong to the table head, table footer, or table body. They are marked using the thead, tfoot, and tbody elements. The order of these elements while entering them in the HTML code is important. The thead element must appear first, followed by the tfoot element (if it exists), and finally the tbody element. A table can contain one thead and one tfoot element, but it can include any number of tbody elements to mark row groups that contain several topical sections.
It is placed at the start of each row to identify the row content.
Header cell
What is the purpose of colspan in <td colspan="7">?
It sets each cell to span seven columns within its row.
The table features are hidden as it does not use the table header or footer.
Responsive table design
The boundary around the entire table is hidden but a 1-pixel blue boundary is assigned to the cells within the table.
Separate borders model
_____ is a single cell that occupies more than one cell row and/or column.
Spanning cell
They are created by adding the rowspan and colspan attributes to either td or th elements.
Spanning cells
Which of the following table objects has the highest precedence in terms of style?
Table cells
It appears before the table body group.
Table footer row group
Which of the following statements is true of adding adjacent borders, to a table, using CSS?
The border style with the highest priority is used if the two borders have the same width but different styles.
Identify a true statement to determine the number of columns in a web table.
The number of columns is the number of cells within the table rows.
Identify the correct hierarchy of tags to create a web table. a. <table>, <tr>, <td> </td>, </tr>, </table> b. <table>, <td>, <tr> </td>,</tr> </table> c. <tr>, <table>, <td> </td>,</table>, </tr> d. <tr>, <td>, <table>,</table>,</tr>,</td>
a
What are the CSS properties that are used to manage column breaks?
The placement of column breaks can be controlled through several CSS properties. The size of column orphans (a line of text stranded at the bottom of a column) can be controlled using the following orphansproperty, orphans: value; where value is the minimum number of lines stranded before a column break. Similarly, to control the size of column widows (a line of text placed at the top of a column), the following widows property is used, widows: value; where value is the minimum number of lines placed after the column break. Another way to define a column break is to use the properties break-before: type; break-after: type; where type can be either auto (to allow the browser to automatically set the column break) or always (to always place a break).
Which of the following statements is true of row groups?
The rows are determined based on the total number of cells within a table.
A table contains five columns where one of the cells in a row spans three columns. Identify the number of table cells that will exist in that row.
Three
Consider the following code. <colgroup> <col span="2" class="Frstcols"/> <col id="Lastcol"/> <colgroup> How many columns does the <colgroup> element create?
Three
A class attribute can be included by placing a table in the schedule class to distinguish it from other tables that may exist on a website.
True
A table has one row with four cells and another row with five. After mapping the cells, the table will have five columns.
True
A web table contains multiple table rows with each row consisting of one or more table cells.
True
A web table is an effective tool for organizing and classifying web page content.
True
Columns and column groups accept only CSS style properties to modify the column borders, background, width, and visibility.
True
Header cells and data cells are types of table cells supported by web tables.
True
In column-span: span; property, span is either none to prevent spanning or all to enable the content to span across all of the columns.
True
Once columns are defined using the colgroup and col elements, individual columns can be identified using id and class attributes to apply CSS styles to specific columns.
True
Only one caption is allowed per web table.
True
The default browser style for data cells is to display text as unformatted text and left-aligned within the cell.
True
The style rule border-spacing: 10px; specifies that all borders within a table should be separated by a distance of 10 pixels.
True
The style rule columns: 250px 4; creates a layout of 4 columns with a minimum width of 250 pixels each.
True
The style rules applied to an entire web table are the ones with the lowest precedence.
True
When a span attribute is not included, the col element references a single column.
True
While treating an entire definition list as a table, the div elements act as table rows and both the definition term <dt> and the descriptions <dd> act as table cells within that row.
True
Andy has created a table for product details where the names of the products and prices of the products are the headers of the table. Which of the following style rules should he add to place a border of 10-pixels around the table with a white background? a. table.product {background: white; border: 10px; width: 100%;} b. table.product {border: 10px, white; width: 100%;} c. table.product {background: white, 10px; width: 100%;} d. table.product {border: white; width: 100%;}
a
Luis has created a table to include the definitions of manufacturing tools used in the industry. He wants to add a space between each column cell of the definition for better understanding. Identify a property that Luis should include in the code to fulfill the requirement.
column-gap;
Identify a property that is used to separate one column from the next using graphic dividing line.
column-rule
Which of the following properties prevents the spanning of content across all the columns?
column-span: none;
Identify a style property that creates a column size of 200-pixels.
column-width
To insert the information of the data-label attribute directly before the data cell value, the _____ property is used.
content
In HTML5, _________ is an attribute that stores the data labels or customized data.
data attribute
In the given figure, the items marked Box A and Box B are the _____ respectively.
data cells and column cells
Using the CSS _________ property, a table layout is applied to other HTML elements such as paragraphs, block quotes, or list.
display
When the width of an entire table is set to be larger than the width required for individual columns, the extra space is _____.
divided equally among the columns
Any style that is applied to the thead, tbody, or tfoot element is _________ by the rows those elements contain.
inherited
When a cell _________ multiple rows or columns, it pushes other cells to the right or down in a table.
spans
The _________ property value of fixed tells the browser to ignore cell content when reducing the width of the table columns.
table-layout
In the given figure, identify the row group element Box A.
tbody
Data cells that do not function as headers for table rows or columns are marked using the _____ element.
td
It is used to mark table cell content that is not the head of a row or column.
td element
Which of the following CSS properties is used to align the caption text horizontally?
text-align
When a style for a table element is created by setting the font color to red, _____.
the caption text will be displayed in the same color as the previous table
In the given figure, Box A refers to _____.
the second cell in rows two and three that spans seven columns
Identify the three row groups supported by HTML.
thead, tbody, and tfoot
It is used to move the cell text in a table.
vertical-align property
It a line of text placed at the top of a column.
widows property