Introduction
HTML, or Hypertext Markup Language, is the primary language for structuring web pages. It collaborates with CSS and JavaScript to define content, appearance, and behavior. HTML comprises elements enclosed in angle brackets, encompassing various webpage components like headings, paragraphs, images, and links. The standard structure includes the , , and elements. HTML facilitates hyperlink creation through the tag, enabling seamless navigation between web pages. HTML5, the latest version, introduces new elements and attributes, enhancing web functionality and accessibility. In essence, HTML serves as the foundation for creating structured, interactive web content, essential for web development and design.

Table formatting and styling
About Lesson

Table formatting and styling in HTML can be achieved using CSS (Cascading Style Sheets). Here are some common CSS properties and techniques for formatting and styling tables:

1. **Borders and Border Collapse:**
– Use the `border` property to add borders to table elements.
– Set `border-collapse: collapse;` to collapse table borders into a single border, creating a cleaner look.
– Example:
“`css
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
padding: 8px;
}
“`

2. **Cell Padding and Cell Spacing:**
– Adjust cell padding using the `padding` property to control the space between cell content and cell borders.
– Use the `border-spacing` property to control the space between cells.
– Example:
“`css
td, th {
padding: 10px;
}
table {
border-spacing: 0;
}
“`

3. **Background Colors:**
– Set background colors for table elements using the `background-color` property.
– Example:
“`css
th {
background-color: #f2f2f2;
}
“`

4. **Text Alignment:**
– Use the `text-align` property to align text within table cells.
– Example:
“`css
td, th {
text-align: center;
}
“`

5. **Font Styles and Colors:**
– Apply font styles and colors to table text using properties like `font-family`, `font-size`, `font-weight`, and `color`.
– Example:
“`css
th {
font-weight: bold;
color: #333;
}
“`

6. **Striped Rows or Columns:**
– Alternating background colors for rows or columns can improve readability.
– Use the `:nth-child` pseudo-class selector to target odd or even rows or columns.
– Example for striped rows:
“`css
tr:nth-child(odd) {
background-color: #f9f9f9;
}
“`

7. **Hover Effects:**
– Add hover effects to highlight table rows when hovered over by users.
– Example:
“`css
tr:hover {
background-color: #e0e0e0;
}
“`

8. **Table Caption Styles:**
– Apply styles to table captions using CSS selectors.
– Example:
“`css
caption {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
“`

By applying these CSS properties and techniques, you can customize the appearance of your HTML tables to match the design of your website and improve readability for users. Experiment with different styles to achieve the desired look and feel.

Join the conversation