How to Make a Table in HTML: A Beginner's Guide / ITech content

Contents:

• 
  : creating a table

• 
  : working with rows

• : adding cells

• : naming columns

• : header

• 
  : main content

• 
  : footer

• 
  : Adding a Header

• Colspan and Rowspan Attributes: Merging Cells
• What to Read

A table is an ordered set of data, organized into rows and columns. At the intersection of these rows and columns are cells containing important information, such as text or numerical values. Tables are an effective tool for visualizing data and simplifying its perception, making them indispensable in various fields, including scientific research, business reports, and educational materials. Using tables allows users to quickly find and analyze the necessary information, significantly improving the usability of working with data.

In the early days of the Internet, web pages were created using tables. However, today, more modern and convenient layout tools exist for layout, such as Flexbox and Grid, which allow you to create responsive and complex layouts. Nevertheless, tables remain useful for visually presenting and structuring data on websites. Their use helps improve the perception of information and make content more organized.

Creating a table in HTML is not difficult, as the language provides all the necessary tags. In this article, we will take a detailed look at how to create tables using data from the latest Marvel films featuring Spider-Man. We will discuss the functionality of tags and their attributes so you can use them effectively in your projects. Understanding the basics of working with HTML tables will help you organize and present information in a more structured and user-friendly manner.

Content is an important element of any text, as it helps readers quickly navigate the material. Properly formatted content improves the user experience and facilitates better information comprehension. When content is structured, readers can easily find the sections and articles they need. This is especially true for web content, where user attention may be limited.

To optimize text for SEO, it is important not only to properly structure the content but also to use keywords that are relevant to the topic. This will help increase the visibility of the page in search engines and attract the target audience.

Furthermore, keeping the information relevant to the interests of readers also plays a key role. Regularly updating the content and adding new data helps maintain interest in the material and promotes its distribution.

By providing high-quality content, you can not only improve your search engine rankings but also build user trust. A clear and logical presentation of information makes the text more attractive and informative for readers.

• : creating a table
• : working with rows
• : adding cells
• : naming columns
• : adding a header
• : highlighting the main content
• : adding a footer
• : adding a heading
• The colspan and rowspan attributes: merging cells
• What to read further

: creating a table

To create a table in HTML, you need to use two main

If we save the file and open it in the browser, we will not see anything. The table has not yet been created, since we have not added rows and columns to it. To display the table in the browser, you need to correctly structure the HTML code by adding the appropriate tags.

: working with rows

Let's start filling the table with data. First, we will create rows using the paired tag. Each table row will contain cells, which we'll add using the tag. This will organize the information in a structured manner, improving data comprehension and user experience. Proper use of HTML tags not only facilitates information visualization but also helps optimize the page for search engines.

Currently, we have three rows, but this doesn't yet form a complete table. The main drawback is the lack of columns, which are necessary for structuring the data and improving information comprehension. To create a complete table, we need to add the appropriate columns, which will help organize the data in an easy-to-read format.

: adding cells

Each table row consists of cells, which are created using a pair of <td> tags placed inside a <tr> tag. The abbreviation «td» stands for «table data». Using these tags allows you to organize information in a structured form, which simplifies data perception and contributes to better SEO-optimized content. Correct use of table tags improves page navigation and makes it more accessible to search engines.

Let's create an HTML table that will list the Spider-Man films that are part of the Marvel Cinematic Universe. In the table, we'll list the film's title in Russian, its original title, and the year it was released. This will help better organize the information and simplify searching for data on these films.

The HTML code for the table will look like this:

<table>
<thead>
<tr>
<th>Title (Russian)</th>
<th>Original title</th>
<th>Year of release</th>
</tr>
</thead>
<tbody>
<tr>
<td>Spider-Man</td>
<td>Spider-Man</td>
<td>2002</td>
</tr>
<tr>
<td>Spider-Man 2</td>
<td>Spider-Man 2</td>
<td>2004</td>
</tr>
<tr>
<td>Spider-Man 3</td>
<td>Spider-Man 3</td>
<td>2007</td>
</tr>
<tr>
<td>Spider-Man: Homecoming</td>
<td>Spider-Man: Homecoming</td>
<td>2017</td>
</tr>
<tr>
<td>Spider-Man: Far From Home</td>
<td>Spider-Man: Far From Home</td>
<td>2019</td>
</tr>
<tr>
<td>Spider-Man: No Way Home</td>
<td>Spider-Man: No Way Home</td>
<td>2021</td>
</tr>
</tbody>
</table>

This table will help viewers quickly find information about Spider-Man-related movies and learn the order in which they were released.

You can copy the code to avoid having to type it out completely:

The table contains rows and columns that contain information about the movies. Each row represents a separate movie, and the columns contain key data such as title, genre, release year, director, and rating. This structure makes it easy to analyze and compare different films, providing users with convenient access to the information they need.

If you repeat the code presented in the article and find that the table is displayed differently in your browser, do not worry - the reason lies in the CSS styles. To achieve the same table design as in the example, create a style.css file in the same folder as your HTML document. Then copy and paste the following code into this file:

Don't forget to include the styles. To do this, add the appropriate line to the HTML file. To understand CSS and how this code works, check out our article on layout basics.

Please note that the number of cells in each row must be the same. Failure to do so may result in a broken table layout, which will negatively impact the perception of information and the overall readability of the content. Therefore, it is important to monitor the table structure to ensure the correct display of data.

: Naming the Columns

In our table, the first row is no different from the others—it contains data cells. However, this row contains column headings, not film information. To reflect this in the HTML code, you need to use appropriate elements that point to the table headers. This will help improve the data structure and optimize the page for search engines.

To format the table correctly, you need to place the column headings in paired tags in the first row. This ensures the correct display and structure of the data, which improves the perception of the information. Using paired tags helps create a clear and understandable table, which is especially important for SEO optimization, since search engines take the structure of HTML content into account when indexing pages. Proper use of tags not only improves visual perception but also contributes to better search engine rankings.

Content receives standard styling, including center alignment and bold fonts. This ensures visual appeal and emphasizes key elements of the text. Using such styles helps improve readability and comprehension, which is important for users and search engines. Proper content styling improves its effectiveness and can positively impact SEO, as it helps highlight important points and improves page structure.

: header

We created a table and filled it with data that is easy for users to perceive. However, search engines and programs cannot interpret the meaning of the information in cells. To improve the understanding of the table's content for both search engines and screen readers, you can add semantic tags. These tags do not change the appearance of the table, but they significantly help search engines correctly index the information and screen readers correctly read the data. Using semantic markup is an important step in optimizing content and increasing its accessibility.

One of the semantic tags in HTML is <header>. This tag is used to create and group header elements, which include column headings and other important elements. The <header> tag must be located inside the <body> and contain at least one <h1>, <h2> or other heading block to ensure the content is structured and accessible. Correct use of the <header> tag This helps improve SEO, as search engines index pages with a clear heading hierarchy better.

We'll create a header that will help search engines and screen readers recognize table column headings, distinguishing them from regular cells. This will improve the accessibility of your content and increase its visibility in search engines, helping users better understand the information. Proper header design is an important aspect of web development that improves SEO and usability.

Now, when a screen reader reads a table's contents, it reads the column heading first, followed by its contents. This improves the information comprehension for users using accessibility tools and makes the table data more structured and understandable. This way, users will be able to navigate through the information faster and find the data they need.

: main content

Wrap the key table data in the semantic tag <main>. This tag is located immediately after the header, denoting the main section with important information. Using this tag allows search engines and screen readers to better understand that this area contains the main information for users. This improves website indexing and ensures more convenient access to content for people with disabilities.

If you do not specify it explicitly, the browser will do this automatically. However, it is recommended to add the information manually for more accurate display and improved SEO. This will help search engines better index your site and increase its visibility.

The tag does not affect the appearance of the table, but it provides a number of functionality. It allows you to structure information, adding semantic meaning to table elements. This makes it easier for both users and search engines to understand the data. In addition, the tag promotes accessibility for people with disabilities, improving navigation and perception of information. Using this tag can also have a positive impact on SEO, as search engines prefer clearly structured and semantically correct pages. Therefore, correct use of the tag plays a significant role in optimizing tables for web content.

• Adjust scrolling of the table page. Now its main cells will scroll independently of the column headings, which will be fixed at the very top.
• Show the screen reader where the main information is located in the table.

: footer

HTML tables can include a footer, which is typically used to display totals calculated based on the data in the table cells. For example, if a table contains information about employee salaries, the footer can display the average salary or total compensation. This allows users to easily perceive important statistics and simplifies analysis of the information presented. Proper use of a footer in HTML tables makes the content more structured and useful for users.

A footer can be defined using the semantic

Note that a table can only contain one block.

The structure of a table with a footer is represented as follows:

: adding a heading

Adding a title to a table will improve its perception and help the user quickly understand its content. This can be achieved using a paired <caption> tag. The browser will display the text enclosed in this tag directly above the table, making the information more accessible and structured.

Headings play a key role for users with visual impairments. Screen readers first announce the headings and then move on to the main content. This allows users to quickly assess whether the information is interesting and decide whether to continue reading or skip certain sections of the webpage. Properly structured headings not only improve accessibility but also contribute to a better overall understanding of the content.

CSS styles are used to format text in HTML. These styles allow you to specify the appearance, size, color of the font, and other visual characteristics, such as line spacing, indents, and alignment. Proper use of CSS styles not only improves the visual perception of your content but also helps users better perceive the information. Optimizing text formatting with CSS allows you to create more attractive and easier to read web pages.

To add a title to a table, use the HTML <caption> tag. This tag allows you to create a heading for the table, making it more understandable and easier to perceive. Proper use of the <caption> tag improves the structure of your HTML code and contributes to SEO optimization, since search engines can better index the content of your page. Example of using the <caption> tag looks like this:

<table>
<caption>Title of your table</caption>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Remember that properly formatted tables with headings not only improve user perception of information, but also contribute to Better ranking of your content in search engines.

The table title is now displayed above the columns and rows. This improvement allows users to quickly navigate the table's contents and better understand the information presented. A clear title helps highlight the main topic of the data, which makes interacting with the table more convenient and efficient.

Colspan and rowspan attributes: merging cells

Merging cells and Columns in HTML tables are necessary for organizing data. This is achieved using the colspan and rowspan attributes, which are applied to the and tags. The colspan attribute allows you to combine cells from two or more columns, while rowspan combines cells from two or more rows. The value of these attributes specifies the number of cells to combine. Using colspan and rowspan helps create more structured and understandable tables, which improves user perception of information and can positively impact the SEO optimization of the page.

Let's add the names of the film directors and producers to our table. This data is the same for all three films, so we combine the cells with the names by applying the rowspan attribute to the tag. This will allow you to display information more compactly and improve the readability of the table.

Now the table looks like this:

What to read

The layout of tables in HTML is relatively Tables are a simple task, but they require attention to detail and precision. With a basic knowledge of HTML, you can effectively organize data on a web page, creating easy-to-read tables. For detailed information and best practices for table layout, we recommend consulting resources such as MDN Web Docs. This portal offers a detailed description of each HTML tag and its features, which can help you avoid common mistakes and achieve high-quality data presentation. Tables created using pure HTML often look unattractive and monotonous. However, CSS styles can significantly improve their appearance. Using CSS allows you to work with colors, borders, fonts, and various effects, transforming standard tables into more aesthetically pleasing elements. For detailed information and practical recommendations on styling tables with CSS, check out this guide from the DigitalOcean team. This guide will help you master the basic techniques and tricks that will make your tables not only functional but also visually appealing.

Learn more about programming and coding in our Telegram channel. Subscribe to stay up to date with interesting content and helpful tips!

Also read:

• HTML: What is it and how does it work?
• Test: How well do you know browser history?
• HTML, CSS, and web standards: capabilities, developer mistakes, and unknown features