Mastering HTML Table Inline Styling: A Guide
Inline styling, through the use of the style
attribute, offers a direct and straightforward method to customize the look of your tables in HTML. This post covers how it works.
Inline styling basics
To apply inline styles, you use the style
attribute within the table tags (such as <table>
, <tr>
, <td>
, etc.), specifying CSS properties and values directly on the element. Consider this example of an HTML table with inline styling:
<table style="border: 1px solid black;"> <tr> <td style="background-color: yellow;">Cell 1</td> <td style="background-color: green; color: white;">Cell 2</td> </tr> <tr> <td style="background-color: blue; color: white;">Cell 3</td> <td style="background-color: red; color: white;">Cell 4</td> </tr> </table>
How to style table headers in HTML?
You can also style table headers (<th>
) using inline styles to set them apart from regular data cells (<td>
). This approach effectively highlights column or row headers.
<table style="border: 2px solid black;"> <tr> <th style="background-color: grey; color: white;">Header 1</th> <th style="background-color: grey; color: white;">Header 2</th> </tr> <tr> <td style="padding: 10px;">Data 1</td> <td style="padding: 10px;">Data 2</td> </tr> </table>
How to adjust table layout in HTML?
Inline styles also let you control your table's layout, including its width, spacing, and padding. The border-collapse
property is especially useful for deciding if table borders are separated or merged into a single border.
<table style="border-collapse: collapse; width: 100%;"> <tr> <td style="border: 1px solid black; padding: 20px;">Cell 1</td> <td style="border: 1px solid black; padding: 20px;">Cell 2</td> </tr> </table>
Limitations and considerations
Although inline styles provide a quick styling method directly within your HTML, they can become cumbersome in larger projects or when applying the same styles across multiple elements. In such scenarios, external or internal CSS stylesheets offer better maintainability and style reusability.
Remember, inline styling takes precedence over styles set by external or internal stylesheets for its specific element.
Invite only
Fast. Opinionated. Collaborative. Local-first. Keyboard centric. Crafted to the last pixel. We've got 50 slots for Alpha access.
How to Center a Table in HTML with CSS
Jeremy Sarchet
Adjusting HTML Table Column Width for Better Design
Robert Cooper
How to Link Multiple CSS Stylesheets in HTML
Robert Cooper
HTML Multiple Style Attributes: A Quick Guide
Max Musing
How to Set HTML Table Width for Responsive Design
Max Musing
Mastering HTML Span Style for Text Customization
Jeremy Sarchet