HTML Tables: Tags, Attributes, and CSS Styling

• The HTML tag <table> creates a table.
• The HTML tag <th> adds a table header cell.
• The colspan attribute merges multiple columns in a table.
• The default alignment of content in a <th> element is center.

Table Attributes

• The rowspan attribute merges two rows in a table.
• The <tr> tag creates a row in a table.
• The <td> tag represents a table data cell.
• The title attribute adds a tooltip to a table cell.

CSS Styling

• The border-collapse property combines adjacent table borders into a single border.
• The CSS property background-color: #ffffff; changes the background color of a table row.
• The CSS selector nth-child() is commonly used to style alternate rows in a table.
• The CSS property color changes the text color.

Images and Links

• The src attribute adds an image to a table cell.
• The alt attribute provides text when the image cannot be displayed.
• The `` tag creates a hyperlink.
• Clicking on a bookmark link navigates to a specific section of the page.

Bookmarks

• The id attribute creates a bookmark in HTML.
• To create a bookmark link, the `` tag should use the href="#id" attribute.
• Adding <a id="top"> at the top creates a bookmark for the top of a page.
• A <h1> with an id attribute, a <p> tag with an id, and a <div> with an id can all serve as a bookmark target.

Table and Bookmark Integration

• To link to a specific table row using bookmarks, use id on the row and link to it with href="#id".
• Bookmarks on a webpage help navigate long pages quickly.

Advanced Questions

• The <td>tag allows merging cells horizonsally in a table.
• The table-layout: fixed; CSS property sets a fixed width for all columns.
• The <p> tag is best for creating a large block of text as a bookmark target.

Practical Review

• If colspan="3" is applied to a <td>, the cell spans across 3 columns.
• The CSS property color changes the font color of table headers.
• It is important to test bookmark links to ensure they navigate to the correct section.
• <a href="#bottom"> navigates to an element with id="bottom".
• The <th> tag is used for table headers.

Explore HTML table creation using tags like

, and

. Learn about attributes such as colspan, rowspan and how CSS properties like border-collapse, background-color, and nth-child() are used for styling. Also, understand how to add images and links to tables. More Like This 3 questions Table Cell Spacing Quiz InstructiveDeciduousForest 10 questions HTML Table Fundamentals ReadyDemantoid 10 questions HTML Table Structure and Markup WellBacklitMimosa 45 questions HTML Table Structure and Usage gr 9 quiz 2 CapableTsavorite Share this lesson Copy the link or share on socials below Copy Link Copied! Use Quizgecko on... Open Browser Continue Got it! Upgrade to continue View Plans & Pricing Feedback Please use this form to submit feedback or report bugs. You can find answers to most questions in our Help Center. Category Select a category General Bug General feedback Generating questions Playing a quiz Sharing a quiz Feedback Image (optional) Submit Create your free account Continue with Google Sign in with Apple or continue with email ← Back Your Name Email Password Confirm Password Already registered? Verify email → By continuing, you agree to Quizgecko's Terms of Service and Privacy Policy. Trusted by top students and educators worldwide OK