This is an HTML Tutorial on Tables and their use in HTML. Learn how to build your own HTML Tables in this tutorial video. If you enjoy this tutorial you can find more information on our website at HTML Tutorials. HTML tables are great for displaying structured data, but there are a few advanced features that make them much more usable and accessible. HTML tables display with a default style in browsers, but CSS lets you make them visually appealing.
Building a Table That Browsers and Screen Readers Both Understand
A table is only as useful as its structure. The outer <table> element wraps everything, each row lives inside <tr>, and individual cells are either <td> for data or <th> for headers. Using <th> for your header row is not a cosmetic choice. Screen readers announce those headers as a user moves through the data, so a visitor who cannot see the layout still knows that the number they just landed on belongs to the March column.
Sectioning With thead, tbody and tfoot
Wrapping your header row in <thead>, your data rows in <tbody>, and any totals row in <tfoot> gives the table three logical regions. Browsers can repeat the header when a long table is printed across several pages, and the separation makes styling far simpler because you can target the header band without writing fragile row-number selectors.
Scope, Captions and Accessibility
Adding scope="col" or scope="row" to your header cells tells assistive technology exactly which direction a header governs. A <caption> placed immediately after the opening table tag gives the whole table a title that is read aloud before the data begins. Both take seconds to add and are the difference between a table that is merely visible and one that is genuinely usable.
Merging Cells Without Breaking the Grid
The colspan attribute stretches a cell across multiple columns and rowspan stretches it down multiple rows. The rule to remember is that every merged cell removes a slot from the grid, so a row that spans two columns needs one fewer cell definition. Miscounting here is the single most common reason a table renders with a ragged edge.
Styling Tables With CSS
Browsers apply a fairly plain default style to tables. Setting border-collapse: collapse; merges the doubled borders between adjacent cells into single clean lines. Padding on td and th gives the data room to breathe, and a subtle background on tr:nth-child(even) creates zebra striping that helps the eye track across wide rows. Text alignment is worth thinking about too: left align text columns, right align numeric columns so the digits line up.
Tables on Small Screens
Wide tables are the classic responsive design problem. The simplest reliable fix is to wrap the table in a container with overflow-x: auto; so it scrolls horizontally instead of forcing the whole page wider. For more complex data, some developers hide less critical columns below a breakpoint or restack each row into a small card. Whichever approach you choose, resist the temptation to use tables for page layout. That practice was abandoned years ago because it produces markup that is difficult to maintain and hostile to assistive technology.
