# How to style tables in HTML HTML table styling refers to the visual design of tables on websites. To style tables, you can use CSS instructions. These can be included directly in the HTML document or referenced through an external CSS file. ## How does HTML table styling work? Modern web design utilizes the power of CSS to customize the appearance of [HTML tables](https://www.ionos.com/digitalguide/websites/web-development/html-table/). With CSS, you can easily modify **the appearance of tabular content elements**. For instance, you can assign background colors to table cells or define the thickness of borders. When styling an HTML table, you have three different methods for applying CSS code at your disposal: - **Embedding in the `` section**: You can include CSS styles using the [HTML tag](https://www.ionos.com/digitalguide/websites/web-development/html-tags/) `
Column 1 Column 2 Column 3 Column 4
Entry 1 Entry 2 Entry 3 Entry 4
Entry 5 Entry 6 Entry 7 Entry 8
Entry 9 Entry 10 Entry 11 Entry 12
Entry 13 Entry 14 Entry 15 Entry 16
``` [![Image: Formatting HTML tables: Example](https://www.ionos.com/digitalguide/fileadmin/_processed_/2/6/csm_html-table-format-example_48edb3fe3f.webp "Formatting HTML tables: Example")](https://www.ionos.com/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-table-format-example.png) The table’s simple design is made up of a green header row and alternating row colors for the rows that follow. ### Styling HTML tables with CSS Styling HTML tables through an external CSS sheet is the best way to separate content from design. Additionally, the styles are easy to reuse for other pages. Since browsers can cache the CSS file, it also helps **optimize loading times**. This method may, however, be too elaborate for smaller web projects. The previous example can be implemented in two steps: First, create a CSS file named `styles.css` and save it in the same directory as the webpage. Add the following code: ```css thead th { background-color: #4CAF50; / *Green for table header* / } tbody tr:nth-child(odd) { background-color: #f2f2f2; / *Light gray for odd rows* / } tbody tr:nth-child(even) { background-color: #ffffff; / *White for even rows* / } ``` Next, link the file in the header using a `` element. The table code remains unchanged: ```html
Column 1 Column 2 Column 3 Column 4
Entry 1 Entry 2 Entry 3 Entry 4
``` ### Styling HTML tables inline Inline CSS is useful when you want to make **specific changes** to an individual table element. It’s ideal for small, one-time projects or tests where reusability isn’t important. However, for more sustainable coding scenarios, it’s best to use one of the other embedding methods. To apply inline styling, simply include the styles directly in the relevant table elements. For our example from above, the code would look like this: ```html
Column 1 Column 2 Column 3 Column 4
Entry 1 Entry 2 Entry 3 Entry 4
Entry 5 Entry 6 Entry 7 Entry 8
Entry 9 Entry 10 Entry 11 Entry 12
Entry 13 Entry 14 Entry 15 Entry 16
``` This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-development/html-table-styling/](https://www.ionos.com/digitalguide/websites/web-development/html-table-styling/) for AI/LLM consumption.