CHS Web Design Track

6 Working with Tables and Columns

MULTIPLE CHOICE

  1. Which of the following HTML structures arranges text in multiple rows and columns?
    1. <div>
    2. <table>
    3. <span>
    4. <nav>
  2. Which of the following HTML elements is used to add a row in a table?
    1. <td>
    2. <tr>
    3. <dd>
    4. <tl>
  3. Identify the correct hierarchy of tags to create a web table.
    1. <table>, <tr>, <td> </td>, </tr>, </table>
    2. <table>, <td>, <tr> </td>,</tr> </table>
    3. <tr>, <table>, <td> </td>,</table>, </tr>
    4. <tr>, <td>, <table>,</table>,</tr>,</td>
  4. Which of the following is true of class in the table tag <table class=” ”>
    1. class is an attribute
    2. class is an tag
    3. class is an function
    4. class is a label
  5. Which of the following HTML elements is used to create header cells in a web table?
    1. <tr>
    2. <td>
    3. <th>
    4. <head>
  6. The two types of table cells supported by web tables are _____.
    1. row cells and column cells
    2. header cells and data cells
    3. border cells and caption cells
    4. legend cells and web cells
  7. The default browser style for header cells is to display the text of the header in bold font and _____ within the cell.
    1. left-aligned
    2. right-aligned
    3. centered horizontally
    4. positioned vertically
  8. Data cells that do not function as headers for table rows or columns are marked using the _____ element.
    1. td
    2. th
    3. tt
    4. tr
  9. In the given figure, the items marked Box A and Box B are the _____ respectively.
    1. row cells and column cells
    2. header cells and data cells
    3. header cells and row cells
    4. data cells and column cells
  10. When two adjacent 1-pixel-wide borders are collapsed together, the width of the resulting border is _____.
    1. 2-pixels
    2. 1-pixels
    3. 4-pixels
    4. 0.5-pixel
  11. The given figure is an example of the _____ borders model.
    1. collapsed
    2. separate
    3. inherit
    4. initial
  12. Which of the following is a default value for border-collapse property?
    1. border-collapse: separate;
    2. border-collapse: collapse;
    3. border-collapse: inherit;
    4. border-collapse: initial;
  13. Which of the following statements is true of adding adjacent borders, to a table, using CSS?
    1. A border style of none is overridden by the same border style.
    2. A narrow border takes priority over a wider border if neither is hidden.
    3. The border style with the highest priority is used if the two borders have the same width but different styles.
    4. The color of the element in the table with the lower priority takes precedence, if the borders differ only in color.
  14. _____ is a single cell that occupies more than one cell row and/or column.
    1. Data cell
    2. Header cell
    3. Table cell
    4. Spanning cell
  15. 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?
    1. rowwidth
    2. colspan
    3. rowspan
    4. colwidth
  16. 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.
    1. Five
    2. Four
    3. Three
    4. Six
  17. The _____ attribute is added to a <td> element to create a cell that spreads across several cells vertically.
    1. cellspacing
    2. cellpadding
    3. colspan
    4. rowspan
  18. In the given figure, Box A refers to _____.
    1. the second cell in column two that spans across two rows
    2. the second cell in rows two and three that spans seven columns
    3. the second cell in row one that spans seven columns
    4. the second cell in rows two and three that spans two columns
  19. What is the purpose of colspan in <td colspan=”7”>?
    1. It sets each cell to span seven rows within its column.
    2. It sets each cell to span seven columns within its row.
    3. It sets each cell to span the eighth column within its row into equal parts.
    4. It sets each cell to span the eighth row within its column into equal parts.
  20. Which of the following HTML tags is used to set the width of a table border?
    1. <table border=”value”>
    2. </table width=”value”>
    3. </table border=”value”>
    4. <table width=”value”>
  21. Which of the following HTML elements is used to create a table title?
    1. <table>
    2. <caption>
    3. <style>
    4. <span>
  22. By default, a browser places a table caption _____.
    1. below the table
    2. in the first row of the table
    3. above the table
    4. in the first cell of the table
  23. Identify a CSS property to place a table caption.
    1. caption-side: position;
    2. caption-width: position;
    3. caption-align: position;
    4. caption-fit: position;
  24. Which of the following CSS properties is used to align the caption text horizontally?
    1. text-align
    2. caption-position
    3. caption-align
    4. text-side
  25. When a style for a table element is created by setting the font color to red, _____.
    1. the caption text will be displayed in a red font
    2. the caption text will be displayed in black font
    3. the caption text will be displayed in the same color as the previous table
    4. the caption text will be displayed in the same color as the border
  26. Identify the three row groups supported by HTML.
    1. thead, tfoot, and tborder
    2. thead, tbody, and tfoot
    3. thead, tborder, and tbody
    4. thead, tfoot, and tcell
  27. Which of the following statements is true of row groups?
    1. The rows are determined based on the total number of cells within a table.
    2. The individual rows are determined using only the class attribute.
    3. The row groups are used to create different styles for groups of rows in a table.
    4. The row groups are used in different applications where the table content is only from internal data sources.
  28. Which of the following is true of row groups that are defined in an HTML table?
    1. The thead element must appear first, followed by the tbody element, and finally the tfoot element.
    2. A table can contain only one thead and tfoot element but can have numerous tbody elements.
    3. A table can contain only one tbody element which is added between thead and tfoot element.
    4. The tbody appears before tfoot to allow the browser to render the body before receiving numerous of tfoot rows.
  29. In the given figure, identify the row group element Box A.
    1. tbody
    2. tfoot
    3. thead
    4. tcell
  30. Identify a true statement to determine the number of columns in a web table.
    1. The number of columns is equal to number of caption elements.
    2. The number of columns is equal to number of rows in a web table.
    3. The number of columns is the number of cells within the table rows.
    4. The number of columns is the total number of cells in a web table.
  31. The columns within the colgroup element are identified by the _____ element.
    1. <span column=”value”/>
    2. <colspan=”value”/>
    3. <col-span=”type”/>
    4. <spancol=”type”/>
  32. How many columns does the <colgroup> element create?
    1. Two
    2. One
    3. Four
    4. Three
  33. Which of the following table objects has the highest precedence in terms of style?
    1. Table cells
    2. Rows
    3. Columns
    4. Table
  34. When the width of an entire table is set to be larger than the width required for individual columns, the extra space is _____.
    1. added to the first column of the table
    2. divided equally among the columns
    3. added to the last column of the table
    4. filled out as a border of the table
  35. Which of the following is an equivalent HTML element for display: table-cell; style?
    1. <th>
    2. <table>
    3. <col>
    4. <tr>
  36. Identify the first step to create a responsive web table that relies only on CSS.
    1. Change the table layout so that each table object is rendered as a block element.
    2. Add a text of data labels as attributes of all of the td elements in the table body.
    3. Use relative positioning to place each data cell with a large left padding to insert data label text.
    4. Add the content of the data label attribute before the data cell value.
  37. To insert the information of the data-label attribute directly before the data cell value, the _____ property is used.
    1. content
    2. position
    3. padding
    4. display
  38. Identify a style property that creates a column size of 200-pixels.
    1. column-count
    2. column-control
    3. column-width
    4. column-gap
  39. Identify a property that is used to separate one column from the next using graphic dividing line.
    1. column-rule
    2. column-count
    3. column-width
    4. column-gap
  40. 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?
    1. article p {
          break-before: always;
      }
    2. article p {
          break-before: always;
      }
    3. article p {
          orphans: 3;
          widows: 2;
      }
    4. article p {
          break-inside: auto;
      }
  41. Which of the following properties prevents the spanning of content across all the columns?
    1. column-span: all;
    2. column-span: none;
    3. column-span: initial;
    4. column-span: inherit;
    42. Case-Based Critical Thinking Questions

    Case 6-1
    Andy designed a web page for a product-oriented industry using CSS properties. He used several HTML tags to create the web page. He also used tables to ensure that the data is easily managed.

  42. 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?
    1. table.product {
          background: white; border: 10px; width: 100%;
      }
    2. table.product {
          border: 10px, white; width: 100%;
      }
    3. table.product {
          background: white, 10px; width: 100%;
      }
    4. table.product {
          border: white; width: 100%;
      }
  43. 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?
    1. border-spacing: length;
    2. border-collapse: separate;
    3. border-collapse: collapse;
    4. border-spacing: initial;
  44. Which of the following properties must Andy use to set the gap between the borders created by using the border-collapse property?
    1. border-spacing: value;
    2. border-spacing: value;
    3. border: length;
    4. border: width;
    45. Case-Based Critical Thinking Questions

    Case 6-2
    Luis has created a web page for a textile industry. When viewing the web page on a different computer, Luis notices a difference in the web page layout. So he decided to make changes in the code to make the layout suitable on all computers.

  45. 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?
    1. column-span;
    2. column-count;
    3. column-collapse;
    4. column-control;
  46. 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.
    1. column-gap;
    2. column-align
    3. column-count;
    4. column-space;

TRUE FALSE

  1. A web table contains multiple table rows with each row consisting of one or more table cells.
  2. Header cells and data cells are types of table cells supported by web tables.
  3. A table has one row with four cells and another row with five. After mapping the cells, the table will have five columns.
  4. The style rule border-spacing: 10px; specifies that all borders within a table should be separated by a distance of 10 pixels.
  5. Spanning cells are created by adding div attributes to either td or th element.
  6. Only one caption is allowed per web table.
  7. A web table can contain any number of thead and tfoot elements but only one tbody element.
  8. Columns and column groups accept only CSS style properties to modify the column borders, background, width, and visibility.
  9. The style rules applied to an entire web table are the ones with the lowest precedence.
  10. 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.
  11. The style rule columns: 250px 4; creates a layout of 4 columns with a minimum width of 250 pixels each.
  12. 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.

MODIFIED TRUE FALSE

Indicate if true or false. If the answer is false correct the underlined word(s) to make the statement true.

  1. A web table is an effective tool for organizing and classifying web page content.
  2. 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.
  3. The th element is used to mark the data cells.
  4. The default browser style for data cells is to display text as unformatted text and left-aligned within the cell.
  5. HTML supports three row groups, which define rows that belong to the table head, table border, or table body.
  6. When a span attribute is not included, the col element references a single column.
  7. 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.
  8. For widows property widows: value; value is the minimum number of lines stranded before a column break.

SHORT ANSWER

  1. 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.
  2. When a cell _________ multiple rows or columns, it pushes other cells to the right or down in a table.
  3. Only one caption is allowed per web table, and the caption element must be listed directly after the opening _________ tag.
  4. In HTML, to specify the caption location for a web table the _________ property is used.
  5. 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.
  6. Any style that is applied to the thead, tbody, or tfoot element is _________ by the rows those elements contain.
  7. The _________ property value of fixed tells the browser to ignore cell content when reducing the width of the table columns.
  8. Using the CSS _________ property, a table layout is applied to other HTML elements such as paragraphs, block quotes, or list.
  9. In HTML5, _________ is an attribute that stores the data labels or customized data.
  10. _________ 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.

Essay

  1. Write an HTML code to create a table with three rows and two columns. Add appropriate headers and enter the data into the table.

Check Your Answers