HTML tables are used to organize information into rows and columns. By default, an HTML table is simple and may not look very attractive. This is where HTML table styling becomes important.
With CSS, you can control almost every visual part of a table. You can change borders, colors, spacing, alignment, fonts, widths, row heights, hover effects, responsive behavior, and much more.
A well-styled table is easier to read and gives a webpage a more professional appearance. In modern web development, table styling is usually done with CSS rather than old HTML presentation attributes.
HTML table styling means changing the appearance and layout of an HTML table using CSS.
HTML provides the structure of a table, while CSS controls how that table looks.
For example:
The HTML above creates the table structure. CSS can then be used to make it visually appealing.
A plain table can be difficult to read, especially when it contains many rows and columns. Proper styling improves readability and helps users understand information quickly.
Good table styling can:
Before styling a table, it is useful to understand its basic elements.
A semantic table can look like this:
This structure makes the table easier to style and improves its semantic meaning.
The recommended approach is to write CSS rules for the table and its individual elements.
For example:
This creates a full-width table with collapsed borders, cell padding, and a different background for the header.
Borders are one of the most common table styling properties.
You can add a border using the border property:
This gives the table, headers, and data cells individual borders.
You can also use different border widths and styles:
Common border styles include:
The border-collapse property controls whether table borders are separated or combined.
For example:
With collapse, adjacent borders are combined into a single border.
The other common value is:
The default behavior is generally separate, although the exact visual result can depend on other table properties.
For most traditional data tables, border-collapse: collapse; is a useful choice.
The padding property creates space between the content and the cell border.
Example:
Without enough padding, table content can look crowded.
You can also control each side individually:
Or use shorthand:
The width of a table can be controlled with CSS.
For example:
A width of 100% makes the table fill the available width of its containing element.
You can also use other units:
However, fixed widths can create problems on small screens. For responsive websites, percentage-based or flexible sizing is usually better.
A table can be restricted to a maximum width:
This can prevent very wide tables from becoming difficult to read on large screens.
Table headers should normally be visually distinguishable from data cells.
Example:
You can also change the alignment:
Headers should have enough contrast so users can easily understand which cells contain labels.
The background-color property can be used for tables, rows, headers, and individual cells.
For example:
You can also highlight a particular row:
HTML:
Alternate row colors make long tables easier to scan. This technique is commonly called zebra striping.
CSS provides the :nth-child() pseudo-class for this purpose.
Example:
This applies the background color to even-numbered rows.
You can style odd rows instead:
Zebra striping is particularly useful for tables containing many rows.
A hover effect provides visual feedback when a user moves the mouse over a row.
Example:
You can combine it with zebra striping:
Remember that hover effects should not be the only way to communicate important information because touch-screen users do not have a traditional hover state.
The text-align property controls horizontal text alignment.
Example:
Possible values include:
For data such as names, left alignment is usually easy to scan. Numeric values are often easier to compare when aligned consistently, frequently to the right.
The vertical-align property controls how content is positioned vertically inside a table cell.
Example:
Common values include:
For example:
This is useful when cells contain different amounts of text.
CSS can control the font used inside a table.
Example:
You can also style headers separately:
Other useful font properties include:
The height property can be used to influence the height of table rows or cells.
Example:
However, it is usually better to use padding and natural content flow rather than forcing fixed heights.
For example:
This allows the table to adapt better when text wraps onto multiple lines.
You can set widths for individual columns using classes or the <colgroup> element.
Example:
CSS:
This can be useful when different columns require different amounts of space.
The table-layout property controls how the browser calculates table column widths.
Example:
With fixed, column widths can be calculated more predictably based on the table width and column settings.
The other common value is:
The auto layout allows the browser to determine column sizes based on content and other constraints.
The <caption> element provides a visible title or description for a table.
Example:
You can style it with CSS:
The caption-side property can also be used to place the caption below the table:
A useful caption should clearly describe what the table contains.
You can style cells in a particular column using classes.
For example:
CSS:
This approach gives you precise control over specific types of data.
Rows can also receive classes.
HTML:
CSS:
This is useful for totals, subtotals, warnings, or other special rows.
You can add rounded corners to a table using border-radius, but table border behavior can affect how the corners appear.
A common approach is:
The exact result can vary depending on the browser and other table styles.
When border-collapse is set to separate, the border-spacing property controls the space between cells.
Example:
You can control horizontal and vertical spacing separately:
The first value controls horizontal spacing and the second controls vertical spacing.
Long text can make a table extremely wide. CSS properties such as overflow-wrap can help.
Example:
You can also use:
However, avoid forcing awkward word breaks when normal wrapping provides a better reading experience.
Large tables can be difficult to use on mobile screens. One common solution is to place the table inside a horizontally scrollable container.
HTML:
CSS:
On a narrow screen, users can scroll horizontally to see the remaining columns.
This approach is often better than forcing every column into a very small width.
Responsive design should preserve access to important information.
For complex tables, simply shrinking the font can make the table difficult to use. Depending on the content, you may instead:
The correct solution depends on the purpose and complexity of the table.
Here is a practical example combining several table styling techniques:
Using a class such as .styled-table is generally better than applying generic styles directly to every table on a website.
For example:
This allows you to create different table designs on the same website.
CSS custom properties can make table themes easier to maintain.
Example:
If you later want to change the design, you can update the variables instead of editing many individual rules.
If your website supports dark mode, tables should also be designed for dark backgrounds.
One possible approach is:
The exact colors should match the rest of your website.
Good styling is not only about appearance. Accessibility is also important.
Use <th> for header cells instead of using ordinary <td> elements and simply making them bold.
For more complex tables, the scope attribute can help communicate header relationships.
Example:
For row headers:
A caption can also help users understand the purpose of the table:
Do not rely only on color to communicate important information. Users with visual impairments or color-vision differences may not distinguish colors in the same way.
Text and background colors should have sufficient contrast.
For example, light gray text on a white background may look stylish but can be difficult to read.
A better approach is to choose clear combinations for:
Good contrast improves readability for everyone, particularly users with visual difficulties.
Tables often contain links. These links can be styled separately.
Example:
Make sure links remain visually identifiable and keyboard accessible.
Tables can also contain buttons for actions such as editing or deleting records.
Example:
Buttons should have clear labels and enough space to be used comfortably, particularly on touch devices.
There are two important table layout approaches.
Automatic layout:
The browser considers the content when determining column widths.
Fixed layout:
A fixed layout can provide more predictable column sizing and may be useful for tables with controlled column widths.
Sometimes a table contains empty cells.
You can target empty cells using the :empty pseudo-class:
However, use this carefully because a cell containing whitespace or other invisible content may not behave exactly as expected.
CSS pseudo-classes can be used to style the first or last cell in a row.
For example:
To style the last cell:
This can be useful for tables where the final column contains prices, totals, or actions.
Several mistakes can make tables harder to use.
1. Using too many colors
A table with many background colors can become visually confusing. Use a small, consistent color system.
2. Removing all borders without alternatives
Borders are not mandatory, but users still need a clear way to distinguish rows and columns.
3. Using very small text
Reducing the font too much just to fit more columns can harm readability.
4. Using fixed widths everywhere
Fixed widths can cause horizontal overflow and poor mobile experiences.
5. Using color as the only indicator
Important information should not depend entirely on color.
6. Ignoring mobile screens
A table that looks good on a desktop may become unusable on a phone.
7. Forgetting table semantics
Use proper table elements such as <th>, <thead>, <tbody>, and <caption> where appropriate.
8. Using excessive padding
Too much spacing can make a table unnecessarily large.
9. Forcing fixed row heights
Fixed heights can cause content to overflow or become cramped.
10. Relying only on hover
Hover effects are helpful but are not available in the same way on touch devices.
Older HTML examples may use presentation-related attributes for styling. Modern websites should generally use CSS instead.
For example, instead of relying on older presentation attributes, use:
Keeping structure in HTML and presentation in CSS makes code cleaner and easier to maintain.
Follow these practices when designing tables:
It is useful to understand the difference between structure and styling.
HTML structure defines what the information means and how it is organized.
For example:
CSS styling defines how the table looks:
Separating these responsibilities produces cleaner and more maintainable websites.
HTML table styling is the process of changing the appearance of an HTML table using CSS. It can include borders, colors, spacing, fonts, alignment, widths, hover effects, and responsive behavior.
CSS is the main language used to style HTML tables. HTML provides the table’s structure, while CSS controls its visual appearance.
Use the CSS border property:
Use:
Use the padding property:
Use the :nth-child() pseudo-class:
Use:
For data tables, targeting tbody rows is often more precise:
One common solution is to place the table inside a container with horizontal scrolling:
For modern web development, CSS is generally preferred for presentation. HTML should primarily provide semantic structure and meaning.
Yes. You can assign a class to a row and style it with CSS.
Then:
Yes. You can use classes, selectors, or the <colgroup> and <col> elements to control column presentation.
No. It is optional. However, border-collapse: collapse is commonly used when you want adjacent cell borders to appear as a single line.
HTML table styling is an important part of creating readable and professional webpages. HTML provides the table structure, while CSS gives you control over its visual presentation.
You can style borders, padding, spacing, colors, fonts, alignment, column widths, captions, rows, and headers. You can also add zebra striping, hover effects, responsive scrolling, dark-mode support, and other modern design features.
The best table is not necessarily the most decorative one. A good table is clear, readable, accessible, responsive, and easy to understand. Start with semantic HTML, use CSS for presentation, avoid unnecessary decoration, and test the final table on different screen sizes.
When these principles are combined, HTML tables can present even large amounts of information in a clean and user-friendly way.