How do you style a table header in HTML?

Style Table Header Using Inline CSS#

One way to style a table header in HTML is by using inline CSS. Inline CSS involves adding the style directly to the HTML element using the style attribute.

1. The style attribute is added to the <th> element to define the styling for the table header.
2. The background-color property sets the background color of the header to light blue.
3. The color property sets the text color of the header to white.
4. The padding property adds 10 pixels of padding around the header text.

Styling Table Header Using Internal CSS#

Another approach is to use internal CSS, where the CSS code is placed within the <style> tags in the head section of the HTML document.

1. The CSS code is placed within the <style> tags in the head section of the HTML document.
2. The CSS selector th is used to target all table header elements.
3. The properties inside the curly braces define the styling for the table header, including background color, text color, and padding.

Using External CSS#

A more reusable approach is to use an external CSS file, where the CSS code is defined in a separate file and linked to the HTML document.

th {
  background-color: lightblue;
  color: white;
  padding: 10px;
}

1. The <link> tag is used to link the external CSS file to the HTML document.
2. The rel attribute specifies the relationship between the HTML document and the linked file.
3. The type attribute indicates the type of the linked file, in this case, a CSS file.
4. The href attribute specifies the path or URL of the external CSS file.

Using CSS Classes#

You can use CSS classes to style table headers and apply the same styles to multiple elements on the page.

1. The CSS class .table-header is defined in the <style> tags.
2. The dot notation (.) is used to target elements with the specified class.
3. The class attribute is added to the <th> element to apply the table-header class.
4. The CSS properties defined for the class are the same as the previous examples.

Using CSS Frameworks#

CSS frameworks like Bootstrap provide pre-designed styles for table headers and other elements, making it easy to style them without writing custom CSS.

1. The <link> tag is used to link the Bootstrap CSS file from a CDN (Content Delivery Network).
2. The href attribute specifies the URL of the Bootstrap CSS file.
3. The table class is added to the <table> element to apply Bootstrap's table styling.
4. The thead-light class is added to the <thead> element to style the table header with a light background color.