# How to use the HTML table heading tag When creating tables in HTML, adding table headings helps give tables more structure. The HTML `` tag marks columns and rows both semantically and visually, providing users, search engines and screen readers with valuable information. ## What is the HTML `` tag? The HTML `` tag (*table header*) is used to define header cells in HTML tables. These cells act as **headings** for the columns or rows they apply to and are typically centred and in bold. You can adjust the appearance of headings using [CSS](https://www.ionos.co.uk/digitalguide/websites/web-design/what-is-css/). HTML table headings should be placed between`` (*table row*) tags. While their position in a table isn’t fixed, they are usually used in the header row or the first column. ## Why are HTML table headings important? HTML table headings help **organise** data in a table and provide context for the data. Using them is a good idea for several reasons: - **Data organisation**: Using the HTML `` tag for headings helps make the data in your table clear and organised. It gives columns or rows a descriptive label, which explains to readers what kind of data to expect. - **Improved readability**: HTML `` makes data easier to understand. The visual formatting for headings makes it easier to identify different categories of data, helping users to find information more quickly. - **Accessibility**: Table headers are especially important for accessibility. Screen readers use `` elements to explain a table’s structure and the context for the data in the table. You can make data in a table even clearer by using additional attributes like `scope` or `headers` to indicate which data belongs to which heading. Tip Headings are just one way to structure your tables in HTML. In our article on [HTML table styling](https://www.ionos.co.uk/digitalguide/websites/web-development/html-table-styling/), we go into more detail on how you can visually customise text and fields. ## What is the syntax for the `` tag? (Example table included) To define a table heading using the HTML `` tag, all you need is an **opening** `` tag and a **closing** `` tag. Inside these tags, you add the text for your heading. If you want, you can also include **attributes** in the opening tag to control how the `` element should be displayed and should behave. The basic syntax (including placeholder attributes) looks like this: ```html Heading ``` Here are some of the most important attributes for HTML table headings: - `scope`: Specifies whether the header cell refers to a column (`col`) or a row (`row`) - `colspan`: Defines the number of columns the header cell spans - `rowspan`: Defines the number of rows the header cell spans - `class`: Specifies CSS class names to define the style - `style`: Allows for inline CSS to customise the header cell To get a better idea of the syntax, let’s take a look at a simple example. In the table below, we have the **categories** and **prices**for three different **products**: apples, bread and juice. We’re going to create headings in both the header row and first column. The `scope` attribute defines whether a header cell refers to a row or a column: ```html

Product	Category	Price
Apple	Fruit	£1.50
Bread	Bakery	£2.00
Juice	Drinks	£1.00

``` This is what the table looks like when rendered: [![Image: HTML table heading example](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/8/c/csm_html-table-heading-example-uk_ccffd71528.webp "HTML table heading example")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-table-heading-example-uk.png) Simple example of an HTML table with headings (without any CSS styling) ## How to insert a main heading for a table with the `` tag You can also add a heading for the **entire table** by inserting a `` element right after the `` tag. You can use CSS to style and position the heading. Let’s add a `

` heading ‘Products and Prices Table’ to our previous example. Here’s the code: ```html

Products and Prices Table
Product	Category	Price
Apple	Fruit	£1.50
Bread	Bakery	£2.00
Juice	Drinks	£1.00

``` Now, you’ll see the new heading for the table: [![Image: HTML table heading: Example with caption tag](https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/d/6/csm_html-table-heading-caption-example-uk_712974cfc4.webp "HTML table heading: Example with caption tag")](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-table-heading-caption-example-uk.png) Heading for the entire table (without CSS styling) using the caption element Tip For more information on the popular markup language, check out our comprehensive [HTML beginner’s tutorial](https://www.ionos.co.uk/digitalguide/websites/web-development/learning-html-a-beginners-tutorial/). This is a markdown version of: [https://www.ionos.co.uk/digitalguide/websites/web-development/html-table-headings/](https://www.ionos.co.uk/digitalguide/websites/web-development/html-table-headings/) for AI/LLM consumption.