TLE-A

• HTML tables

  Used for displaying data that make sense in spreadsheet software, consisting of rows and columns to arrange data like text, images, links, other tables, etc.
• HTML tables

  • Created using the <table> tag, <tr> tag for table rows, and <td> tag for data cells
  • Elements under <td> are regular and left aligned by default
• Creating an HTML table

  1. Describe the table between <TABLE> and </TABLE> tags

  2. Construct each row with <TR> and <TD> tags for cells

  3. Repeat for each new row
• HTML table tags

  • <td> for table data
  • <tr> table row
  • <table border> thickness of border
  • <bordercolor> color of border
  • <cellspacing> space between table cell
  • <cellpadding> size of table cell
• HTML tables can have different styles and shapes.
• Adding a border


  Use CSS border property on table, th, and td elements
• Collapsed table borders

  Set CSS border-collapse property to collapse to avoid double borders
• Styling table borders

  1. Set background color of cells and give border a white color to create invisible border

  2. Use border-style property to set appearance (dotted, dashed, etc.)

  3. Use border-color property to set border color
• Table with one header

  • Tables with one simple header for rows or columns, where data is descriptive and unambiguous
• Table with two headers

  • Tables with a simple row header and a simple column header, where the <th> element is used to identify header cells and the scope attribute is used to declare the direction of each header
• Table with irregular headers


  • Tables with header cells that span multiple columns and/or rows, using elements like <colgroup>, <thead>, <tfoot>, <tbody>, and <col> to define the structure and relationships
• HTML form


  A section of a document containing normal content, markup, and special elements called controls (checkboxes, radio buttons, menus, etc.) that users can complete and submit for processing
• Drop-down


  An alternative to radio buttons and checkboxes, allowing users to choose multiple options from a select box by adding the "multiple" attribute to the <select> element
• T/F

  HTML tables are used for organizing and displaying data in a structured format on web pages. True
• T/F

  The <colgroup> element can contain a <col> element to identify individual columns in the group. True
• T/F

  Radio buttons are a better option than dropdowns for allowing users to choose multiple options. False
• T/F

  A <caption> element in HTML is used for creating headings within a table. True
• T/F

  The scope attribute in HTML is used with the <th> element to declare the direction of each header in a table. True
• T/F

  HTML forms are used to modify controls such as checkboxes and radio buttons. True
• T/F

  Dropdowns are considered a better option compared to radio buttons and checkboxes in all cases. False
• T/F

  Adding the multiple attribute to the <select> element allows users to choose multiple options from dropdown. True
• T/F

  The <select name=:" "> element is used to create multiple menus in HTML forms. False
• T/F

  The CSS property border-color is used to set the width of table borders. False
• Group attribute is used with the <col> element to identify individual columns in a group.
• What is the purpose of the <col> element in HTML tables?

  define individual table cells
• How can you set a background color for table cells?

  Using CSS background-color property
• What HTML element is used to create a caption for table?

  <caption>
• What HTML tag will you use to define the rows of a table?

  <tr>
• What HTML element would you use to organize data into a structured format?

  <table>
• What HTML attribute would you add to the <select> element to allow for multiple selections?

  multiple
• What CSS property will you use to ensure that adjacent cell borders don't overlap?

  border-collapsed
• What are the dotted table borders values?

  hidden

  outset

  none

  ridge

  inset

  dotted

  double

  dashed

  groove

  solid
• With the border-color property, you can set the color of the border.
• The scope attribute can be set to row or col to denote that a header applies to the entire row or column, respectively.
• If the user uses Tables Mode, captions are the primary mechanism to identify tables.
• An HTML form is a section of document containing normal content, mark up, special elements called controls.
• Having drop downs on your web page enhances the overall quality and design on the screen.
• Several elements and attributes can be used to define the structure and relationships of the header and data cells.