HTML tables allow you to display data in rows and columns on a webpage. New web technologies such as CSS grid and flexbox provide additional layout options. However, tables remain valuable for displaying tabular data and spreadsheet-like information.
In this beginner's guide, we'll walk through everything you need to know to start building these tables from scratch.
Tip: If you're interested in learning about HTML tables but would like to save yourself some time building them, you can use our best-in-class HTML Table Generator.
Who Can Benefit from This Beginner's Guide?
I crafted this guide for a diverse audience, including:
- Web Developers Starting Out with HTML: Whether you're just starting with HTML or already know your way around, this guide helps you build a strong foundation for working with HTML tables.
- Marketers and Content Creators: Building long-form content that involves presenting data sets? HTML tables can be your ally, and this guide will equip you with the knowledge to use them effectively.
- Anyone Needing to Display Relational Datasets: No matter your experience, if you want to display data on a webpage while keeping the connections clear, this guide is for you.
We'll cover all the basics, best practices, and details you need to start building HTML tables. You do not need any prior HTML experience to follow along. Let's dive in!
Introduction to HTML Tables
The <table> tag defines HTML tables. The <tr> tag defines each row inside a table. Within each row, you define data using either the <td> or <th> tag, depending on its location and context.
In this example, we created a simple 3x4 table with 3 columns and 4 rows. Pretty easy, right?
Note: In this article, the tables have the same styles as our own tables (grey header, striped rows, etc.). We will discuss different styles in some parts. Generally, your tables will adopt the styles of your website. However, you can modify them using CSS.
When to Use Tables
Tables are important for web developers and content creators, providing many benefits that make them necessary in different situations. Here are some key reasons to consider using them in your projects:
Display Tabular Data with Ease
Tables organize data in rows and columns, making it easier to present and arrange information in a structured manner. This makes them ideal for showcasing data sets that follow a relational structure.
Effortless Horizontal and Vertical Alignment
Tables are good at aligning text both horizontally and vertically. This flexibility in alignment ensures a clean and visually appealing presentation of your content.
Semantic Structure for Enhanced Readability
By utilizing HTML tables, you impart semantic meaning to your data. This improves code readability and helps search engines understand content structure, leading to better SEO.
Optimized for SEO and Data Relationships
Tables play a crucial role in improving Search Engine Optimization (SEO) by clearly displaying relational data. HTML tables organize data like financial reports, sports results, and train schedules for easy presentation and understanding. They help show the connections between different pieces of information.
When NOT to Use Tables
While tables are useful for organizing tabular data, there are situations where they may not be the best choice. Here are some instances where it's not a good idea to use them:
Layout and Design
You should not use tables for page layout or to create a grid-based structure. Instead, use CSS for layout purposes. CSS is for presentation; using tables for layout can make code harder to maintain and more complicated.
Responsive Layout Design
Tables can be challenging to make responsive for different screen sizes. Modern web design favors responsive layouts that adapt to various devices, such as smartphones and tablets. Using tables for layout can make it difficult to achieve a responsive design.
Accessibility (With Complexity)
Tables can present challenges for accessibility. Screen readers struggle with tables used for layout, making it harder for disabled users to access content. Proper HTML5 structural elements and semantic markup are essential for creating accessible content.
Non-Tabular Data Presentation
If the content you're presenting is not tabular data, using a table is not a good fit. For non-tabular content, use semantic HTML elements that accurately describe the structure and purpose of the content.
Mobile Experience
Tables can be difficult to navigate on small screens. For mobile users, try different ways to show information on smaller screens, like collapsing columns or using responsive design techniques.
HTML Refresher
Before diving into the details of tables, let's recap some key HTML basics.
Tip: If you're already well-versed in HTML, feel free to skip to the next section of your choice.
HTML stands for HyperText Markup Language. HTML documents contain text content along with HTML tags that apply structure and meaning to content.
Here are some common HTML tags:
- <html> - The root element that contains the entire HTML document
- <head> - Contains metadata about the page
- <body> - Contains the visible page content
- <h1> to <h6> - Headings, <h1> is the most important
- <p> - Paragraph text
- <ul>, <ol>, <li> - Unordered, ordered, and list item tags for lists
- <img> - Adds an image
- <a> - Creates a hyperlink
- <table> - Defines a table (the element you're here for!)
HTML tags provide semantic structure and meaning to content. Most tags have an opening and closing tag with the content in between:
Some tags are self-closing with just one tag:
Now that we've reviewed some HTML basics, let's look at the anatomy of an HTML table.
Anatomy of an HTML Table
As mentioned earlier, you define an HTML table with the <table> tag. The <tr> tag defines each row inside the table. The <td> tag defines data in table cells inside each row.
Some additional HTML table elements include:
- <th> - Defines a table header cell
- <thead> - Groups header content in a table
- <tbody> - Groups table body content
- <tfoot> - Groups footer content in a table
- <caption> - Provides a caption or title for a table
These elements help add additional semantic meaning to tables.
Now let's walk through building a simple HTML table step-by-step.
Building a Simple HTML Table
Follow along as we build a simple HTML table to display a list of products and prices:
Tip: For this process, you can use our handy HTML Table Generator. However, we’ll also show you the manual way of doing it.
Step 1: Add a <table> element along with the <caption> element to add a title
We're going to start off with the most basic table element — the <table> tag. From here, we're going to add a <caption> that describes our table. In this case, we'll call it "Product Pricing."
As you can see, no other table elements have been added aside from the caption. Let's change that!
Step 2: Add a <thead> element and nested <tr> and <th> elements to define the table header row
Time to get semantical (is that even a word?). Let's add our <thead> tag to define our table header along with a single <tr> tag (since it's still a row in the table). Inside of that <tr> tag, we'll add 2 <th> tags to semantically establish them as header cells.
Looking good! Let's keep moving.
Step 3: Add a <tbody> element and use <tr> and <td> to add table rows and data cells
Much like what we did for the header of the table, we can now establish the body of the table using the <tbody> tag. We can use <tr> and <td> tags to show product details like name and price in this section.
Our table now has semantic structure. We're almost done!
Step 4: Fill in the content for each cell
Now, we can add our content into each table cell. Your content will almost always come in the form of text (with few exceptions, especially for modern tables).
Step 5: Add any additional styling or attributes
We now have a near complete table. However, we'd now like to link each product to it's given product page. Let's add some <a> tags in order to establish links.
And that's the basics of building out an HTML table! The <table>, <tr>, <td>, and <th> elements provide the overall table structure. Tags like <thead>, <tbody>, and <caption> add semantic meaning.
Next let's look at some key table attributes to control styling and layout.
HTML Table Attributes
Rowspan Attribute
The rowspan attribute is used to make a cell span multiple rows in a table. This can be particularly useful when dealing with data that should be grouped across several rows.
In this example, the first cell in the first row has a rowspan of 2, causing it to span the first and second rows. This creates a visual grouping effect for the data.
Colspan Attribute
Similarly, the colspan attribute allows a cell to span multiple columns, enabling the consolidation of data horizontally.
In this case, the second cell in the first row has a colspan of 2, causing it to span the second and third columns. This creates a wider cell that accommodates the data intended for both columns.
Combining Rowspan and Colspan
You can combine rowspan and colspan attributes to create complex table layouts.
In this example, the second cell in the first row spans two columns (colspan="2") and two rows (rowspan="2"), creating a larger cell that spans multiple rows and columns simultaneously.
Understanding and effectively using rowspan and colspan attributes can significantly enhance the presentation of data in HTML tables, allowing for more flexible and visually appealing layouts.
However, it's important to keep accessibility in mind—the more complex the table layout, the more challenging your data can be to interpret, both by humans and screen readers.
Depreciated Attributes
Border Attribute
The border attribute adds a visible border to the table and cells. This attribute is deprecated in HTML5, meaning CSS borders should be used instead:
In this example, border-collapse: collapse; is used to collapse the borders into a single border, and border: 1px solid black; is applied to both the table and table cells (<td> and <th>).
Cellpadding and Cellspacing
cellpadding controls padding inside each cell, while cellspacing controls spacing between cells. Both are deprecated in HTML5 in favor of CSS:
In this example, padding: 10px; is applied to both <td> and <th> elements to control the padding inside each cell. border-collapse: separate; and border-spacing: 10px; are used to control the spacing between cells.
Now that we've covered table structure and attributes, let's look at styling tables with CSS in greater detail.
Styling HTML Tables with CSS
While HTML provides the overall table structure, CSS is used to style and layout tables.
Some common styling includes:
Layout
Setting the layout of an HTML table involves controlling its width and centering it horizontally. This can be achieved through CSS styles. For example:
Here, the width property is used to define the overall width of the table, and margin: 0 auto; centers the table by setting equal margins on the left and right.
Borders
Adding borders to the table and cells enhances the visual structure. You can control the border color, style, and width using CSS properties:
In this example, the border property is used to set a solid black border around the table and its cells. Additional styling is applied to header cells (<th>) for improved visual distinction.
Zebra Stripes
Adding zebra stripes involves applying alternating background colors to rows, which enhances readability. Here's an example:
This CSS selector targets even rows (tr:nth-child(even)) and applies a background color, creating a visually appealing zebra stripe effect.
Text Alignment
Aligning text within cells improves the overall presentation. You can control horizontal text alignment using the text-align property:
This example centers text horizontally within both regular cells (<td>) and header cells (<th>), but you can customize it based on your layout preferences.
Padding
Adding padding inside cells helps create spacing between the content and cell borders. Here's an example:
In this case, the padding property is used to add 10 pixels of padding to both regular cells (<td>) and header cells (<th>), enhancing the visual appeal and readability of the table.
There are tons of styling options for formatting tables with CSS. These are just a few!
Accessible HTML Tables
When building tables, it's important to keep accessibility in mind:
Utilizing the <caption> Element
When creating HTML tables, it's good practice to use the <caption> element to provide a brief and concise description of the table's purpose and content. The <caption> element serves as a title or heading for the table, making it more accessible and providing context to users or assistive technologies.
Associating Headers with Data Cells Using <th>
To enhance the accessibility and understanding of your table, use the <th> element to designate header cells. Header cells should be used for the labels of rows and columns. By associating headers with corresponding data cells, you create a clear and meaningful relationship within the table. This association is particularly valuable for users relying on screen readers, as it helps them interpret the structure of the table more effectively.
Implementing Semantic Elements like <thead>, <tbody>, and <tfoot>
Break up your table into logical sections using semantic elements such as <thead>, <tbody>, and <tfoot>. These elements help to organize the content and improve the structure of the table. The <thead> element contains header information, <tbody> includes the main content, and <tfoot> holds the footer or summary information. This segmentation not only enhances readability but also contributes to a more accessible and well-structured table.
Keeping Markup Clean and Well-Structured
Maintain clean and well-structured HTML markup when creating tables. Avoid unnecessary nesting of tables and complex cell spanning, as these practices can make the table more challenging to navigate for both users and assistive technologies. Clean and well-organized markup ensures that the table is easily understandable, promoting better accessibility and a more seamless user experience.
Paying attention to accessibility ensures your HTML tables are usable and understandable to all readers.
Advanced HTML Tables (With Examples)
We've covered the basics, but there are a few more advanced table features to be aware of:
Merged Cells
While we touched on colspan and rowspan attributes earlier, their advanced usage involves merging cells across rows and columns. These attributes allow a single cell to span multiple columns or rows, creating a more complex layout:
Here, the first cell spans two rows (rowspan="2") and the second cell spans two columns (colspan="2"), resulting in a table with merged and spanned cells.
Nested Tables
Though it's not usually recommended because it makes the code more complicated, nested tables involve putting one table inside another. It can help with making detailed layouts, but it's best to use it carefully so that the code (and your table) stays easy to read. Honestly, this isn't something people use a lot, and it's usually better not to.
Nested tables can be useful but use them sparingly as they create more complex markup.
Responsive Tables
Responsive design is crucial for tables, ensuring they adapt to various screen sizes. Advanced techniques involve using CSS and HTML to address responsive challenges:
Horizontal Scrolling
Wrap your table within a container and apply the overflow: auto; property to enable horizontal scrolling on smaller screens. This prevents the table from expanding beyond the viewport width.
Hiding Less Important Columns
Use media queries to hide less important columns on smaller screens, improving readability and focusing on essential content.
Adjusting Font Sizes and Padding
Modify font sizes and padding for tables and cells on smaller screens to maintain a balanced design.
Incorporating these advanced features enhances the versatility of HTML tables, allowing for more sophisticated layouts and ensuring a seamless user experience across various devices and screen sizes.
Best Practices
While tables are a powerful tool, their misuse can lead to accessibility issues, poor performance, and difficulties in maintaining code. In this section, we will explore best practices to ensure that your HTML tables are well-structured, semantically meaningful, and accessible. By following these guidelines, you can enhance the user experience, improve search engine optimization, and create more maintainable and future-proof tables.
Use HTML to Define the Table Structure and Relationships
The HTML elements like:
should be used to set up the overall table structure and relationships between data. Let HTML handle the semantics. Don't try to achieve visual layouts with complex HTML markup. Keeping the HTML clean and straightforward makes it easier to maintain and style.
Use Semantic HTML Elements to Add Meaning
Make use of HTML5 semantic elements like:
to add meaning to the table structure. Use <th> to indicate table header cells explicitly. Semantic elements lead to better accessibility and SEO.
Style the Table with CSS
Once the HTML defines the overall structure, use CSS for all styling and layout needs. Things like borders, background colors, height/width, alignment, padding, font styles, etc. should all be handled in CSS. This separation of concerns leads to cleaner and more maintainable code.
Keep Markup Lean and Well-Formatted
Here are some quick and easy tips:
- The HTML markup itself should be lean, clean and well formatted.
- Use proper indentation of nested elements.
- Avoid unnecessary nesting or complexity.
- Keep code lines to reasonable lengths.
- Well organized and commented code is much easier to revisit later on.
Make Tables Accessible
Keep accessibility in mind when structuring tables. Here are some ways to do it:
- Associate headers with data cells using <th>.
- Provide captions and summaries.
- Use semantic elements.
- Linearize logically.
- Ensure color contrast.
All these practices help make tables usable by those with disabilities.
Validate HTML
Use the W3C HTML Validator to check for any errors or warnings in table markup. Fixing validation issues can uncover problems like improper nesting, malformed attributes, and badly formatted code. Proper validation helps ensure proper rendering across different browsers.
Note: If you use our HTML Table Generator, the code will be semantically correct out-of-the-box.
Following coding best practices will improve your table markup and user experience. Even if you're not a developer, understanding the basics will go a long way.
Conclusion
You should now have a good understanding of how to create HTML tables!
We covered:
- Basic table structure using <table>, <tr>, <td>, and <th>.
- Add semantic meaning using <caption>, <thead>, <tbody> and <tfoot>.
- Adding borders, spacing, styling, and layout with HTML attributes and CSS
- Best practices for accessible semantic markup
- Additional table features like spanning, nesting, and responsiveness
HTML tables provide a handy way to display relational datasets on webpages. Start putting your new skills into practice by building out HTML tables for your own projects!
Helpful Resources
Here are some recommended resources for learning more about HTML tables:
- Mozilla Web Docs
- HTML Table Generator - Our interactive tool for building HTML tables
And for a complete guide to web development, take a look at The Odin Project.
.png)
