How to Create a Table in HTML

How do You Define an HTML Table?

In HTML, material organized into rows and columns is referred to as a table. Tables may show data such as goods and their costs, personnel, their hire dates and pay, and travel information, including ticket costs and departure schedules. View this page for an explanation of HTML headings and paragraph tags with examples.

Table Tag inside HTML

Data shown in tabular format (i.e., row-column format) in HTML uses the table element. Table tags (header, body content, etc.) control how the page is laid out. In HTML, you must specify the table using the element to construct a table. The table container, known as the tag, indicates the start and finish points of the table.

The tag allows you to add a table row. We must take advantage of the

Table Arrangement

The table seems more legible there. That is because the table on this page has less style than the one on GitHub, which has more substantial CSS applied. Web tables need a strong, well-organized HTML structure and some CSS stylistic information. This module focuses on the HTML portion; when you're done, check out our page on styling tables to learn about the CSS portion.

This module won't be devoted to CSS, but we have given you access to a minimum stylesheet that you may use to improve the readability of your tables over the default version that comes with no styling. The CSS and HTML templates can be found here. These resources will provide a strong foundation for experimenting with HTML tables.

Ways to Avoid Using Tables in HTML

All tabular data should be displayed and organized using HTML tables, and the web page layout needs to be more appropriate for them. This method was used when web browsers did not reliably and regularly support CSS positioning and CSS needed to be more sophisticated. These days, CSS offers several layout methods that are more capable than HTML tables and suitable for many online browsers. Examples include the grid, flexbox, and display attribute.

The most frequent reasons for not using HTML tables for layout are listed below:

• Complex code: Table layouts often have several levels of nested tables, so they frequently require more complex markup structures than conventional layout approaches. For table layouts, this implies that writing, maintaining, and debugging code is more difficult.
• Accessibility issue: Due to their intricate markup structures, layouts created using tables might be problematic for visually challenged users and screen readers. The primary problem is that text in a table arrangement is only sometimes understandable from top to bottom and left to right. It may also be challenging for a screen reader to interpret nested tables and table cells' different spans and characteristics.
• Inability to respond: By default, tables are scaled according to their content. Further code is thus needed to optimize table layouts for various devices. Conversely, responsive layout paradigms include Bootstrap, CSS Grid, and Flexbox.

When are HTML Tables not Appropriate to Use?

Because this is their intended usage, HTML tables should be utilized for tabular data. Unfortunately, many people still utilize HTML tables to organize web pages, with one row as the header, another as the content columns, a third as the footer, and so on. Visit Page Layouts in our Accessibility Learning Module for further information and an example. Table layouts are far less frequent these days; however, they are still present in certain parts of the web, mostly because CSS support across browsers used to be appalling.

In other words, it could be better to use CSS layout approaches for layout instead of tables. These are the primary causes:

• Layout tables make a website less accessible to users with visual impairments. Blind users utilize screen readers, which read aloud material from an HTML page based on the interpretation of the tags present. The output from screen readers will perplex its users since tables are not the best tool for layout, and the markup is more complicated than CSS layout approaches.
• Table layouts often need more sophisticated markup structures than appropriate layout approaches, which results in tag soup. That may make creating, maintaining, and debugging the code more difficult.
• Tables don't react to requests automatically. Proper layout containers (such as <header>, <section>, <article>, or <div>) have a width that automatically adjusts to 100% of the parent element. Table layout style requires additional steps to ensure it functions properly across various devices since tables are scaled based on their content by default.

Adding Element-containing Headers

Let's now focus on table headers, which are unique cells that appear at the beginning of a row or column and specify the kind of data that is included inside (for an illustration, refer to the "Person" and "Age" cells in the first example in this article). Look at the following table example to see why it is helpful. The source code comes first:

<table>

  <tr>

    <td>Dog</td>

    <td>Breed</td>

    <td>Age</td>

    <td>Owner</td>

    <td>Eating Habits</td>

  </tr>

  <tr>

    <td>Knocky</td>

    <td>Jack Russell</td>

    <td>16</td>

    <td>Mother-in-law</td>

    <td>Eats everyone's leftovers</td>

  </tr>

  <tr>

    <td>Flor</td>

    <td>Poodle</td>

    <td>9</td>

    <td>Me</td>

    <td>Nibbles at food</td>

  </tr>

  <tr>

    <td>Ella</td>

    <td>Streetdog</td>

    <td>10</td>

    <td>Me</td>

    <td>Hearty eater</td>

  </tr>

  <tr>

    <td>Juan</td>

    <td>Cocker Spaniel</td>

    <td>5</td>

    <td>Sister-in-law</td>

    <td>Will eat till he explodes</td>

  </tr>

</table>

Active Learning: The Heads of Tables

• The dogs-table.html and minimal-table.css files must first be locally copied to a new directory on your computer. The identical dog example, as previously shown, is included in the HTML.
• You may use the element ('th' stands for 'table header') to identify the table headers as headers both visually and semantically. Except for denoting a header rather than a regular cell, this functions precisely like a. Enter your HTML code and replace all of the elements around the table headers with elements.
• The headers should now appear when you save your HTML and open it in a browser.