HTML Tables

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Dev P Ishaili

What are HTML Tables?

HTML tables are elements in HTML that are used by developers to arrange data in tabular format, consisting of rows and columns.

They are represented by the opening tag <table> and the closing tag </table>.

Basic Structure of HTML Tables

HTML Tables are comprised of different elements that serve essential purposes to the structure of a table.

1. Rows: The horizontal arrangement of data in a table.
2. Columns: The vertical arrangement of that in a table
3. Header: A row at the top of a table that is used to label each column.
4. Footer: A row at the bottom of a table that is used to contain further information about the table.
5. Body: This is used to group the primary contents of the table, which consists of one or more rows and columns.
6. Caption: This represents the title of the HTML table.
7. Data cells: this defines a unit cell of an HTML table that contains data.

Use cases of HTML Tables

• Organize data: A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet.
• Display data: An HTML table is a great way to display things such as financial data, calendars, pricing, feature comparison, the nutrition facts information panel, bowling scores, and many other tabular data.
• Comparing data: things like price comparison, metrics differences, and others, tables are the best options.

When to not HTML Tables

• For a Website layout: It was very common, for millennials ago that people use <table></table> to style the layout of their websites. With flexbox and grids available today, at disposal, it is advisable to rather style a website layout with flexbox or grid, and use the <table><table> element as rather explained in the use-cases.

The general rule is that the websites should be accessible. One part of accessibility is screen readers which read tables from top to bottom, left to right. With the tables in HTML, the order of how the site is presented is determined by visual choices instead of accessibility choices. In cases like that, screen readers don’t always work as you’d want them to.

References for deeper dive

• https://www.tutorialspoint.com/html/html_tables.htm

• https://www.tutorialrepublic.com/html-tutorial/html-tables.php

• https://www.freecodecamp.org/news/html-tables-table-tutorial-with-css-example-code/

• https://www.freecodecamp.org/news/html-tables-all-there-is-to-know-about-them-d1245980ef96/

• https://blog.hubspot.com/website/make-a-table-in-html

GitHub Repo

https://github.com/devpacademy/HTML-Tables

Acknowledgement

Dev P Academy

Thanks for engaging 🎉.

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Dev P Ishaili

Print Share Comment Cite Upload Translate Updates

APA

Dev P Ishaili | Sciencx (2022-09-10T05:14:28+00:00) HTML Tables. Retrieved from https://www.scien.cx/2022/09/10/html-tables/

MLA

" » HTML Tables." Dev P Ishaili | Sciencx - Saturday September 10, 2022, https://www.scien.cx/2022/09/10/html-tables/

HARVARD

Dev P Ishaili | Sciencx Saturday September 10, 2022 » HTML Tables., viewed ,<https://www.scien.cx/2022/09/10/html-tables/>

VANCOUVER

Dev P Ishaili | Sciencx - » HTML Tables. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/09/10/html-tables/

CHICAGO

" » HTML Tables." Dev P Ishaili | Sciencx - Accessed . https://www.scien.cx/2022/09/10/html-tables/

IEEE

" » HTML Tables." Dev P Ishaili | Sciencx [Online]. Available: https://www.scien.cx/2022/09/10/html-tables/. [Accessed: ]

rf:citation

» HTML Tables | Dev P Ishaili | Sciencx | https://www.scien.cx/2022/09/10/html-tables/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.