How to Create a Clone Website (Fake Website) with HTML

The Ultimate Travel Companion: Top 5 Must-Have Apps For Your

March 28, 2025
Web Tutorials
Notification Show More
Latest News
code bloger facebook clone page coder

How to Create a Clone Website (Fake Website)

Mar 01, 2025
Top five app for travelling

The Ultimate Travel Companion: Top 5 Must-Have Apps

Jul 14, 2024

How to Create a...

The Ultimate Travel Companion:...

Tables In HTML

Semantic HTML tables are used to display information in tabular form and make it easy to form such complex data. Tables organize content on the page into rows and columns, allowing for easy presentation of information once more, like charts.

There are the following HTML table Tags

  1. <table> </table>
  2. <tbody></tbody>
  3. <thead></thead>
  4. <tfoot></tfoot>
  5. <tr></tr>
  6. <th></th>
  7. <td></td>

Basic Table Tags

To create a table in HTML, use the <table> element. A basic table is composed of rows (<tr>) and cells (<td> for data cells and <th> for header cells). Here’s a simple example:

Basic Table Structure

In this portion of the project, we demonstrate the use of the elements.

Here’s a simple example of how to use the <figure> and <figcaption> elements:

				
					<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
    <tr>
        <td>Apples</td>
        <td>$2.50</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>$3.00</td>
        <td>15</td>
    </tr>
</table>
  • table Tag: In the above example,  you see the first <table> tag is open the table tag represents  that to create an outer boundary of a table the table tag is  the parent tag it tells the browser to convey the information in a table chart

 

  • tr Tag: the ‘<tr> tag is responsible for to create a row

 

  • th Tag:  the ‘<th> tag is responsible for creating a cell but is only used one time to make the first row because the first row represents the table heading.

Adding Table Headers and Captions

  • Table Headers: Use the <th> tag for table headers, which can help improve accessibility by making it clear what each column represents.

 

  • Captions: The <caption> element provides a brief title or description of the table’s contents.
				
					<table>
    <caption>Fruit Price List</caption>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
    <!-- Rows go here -->
</table>

Long Table Design

HTML tables are a way to sort, arrange, and systematically present information, especially when dealing with more records in the form of tables. The elements thead, tbody and tfoot can be used to group content in a table making it more readable or properly accessible.

Element

 

thead Element

 <thead> header for the content within Tag represents the rows of labels that describe each column or group of columns in an HTML Table Code Points to remember: This in turn assists both the browser and screen reader to differentiate the header of the table as opposed with body enhancing presentation and accessibility.

				
					<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
</table>

tbody Element

The <tbody> element contains the main body of the table which contains all the data rows. It is a good styling and structuring element, particularly in long tables where separate header and body rows help in better clarity.

				
					<tbody>
    <tr>
        <td>Apples</td>
        <td>$2.50</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>$3.00</td>
        <td>15</td>
    </tr>
</tbody>

tfoot Element

The <tfoot> element of the footer of the table can be provided with the <tfoot> element, and this can contain summary information or totals. That’s especially useful for tables with numerical data with calculations like sums or averages to be displayed.

Managing Large Tables

When used together <thead>, <tbody>, and <tfoot> make tables well organized and accessible, especially for bigger data. These elements not only make tables more readable but also make it easier to style and keep a consistent structure in a table.

 

Find out how to implement <thead>, <tbody>, and <tfoot> to produce clean, SEO-friendly tables that make both user experience and accessibility easier.

Enhancing Accessibility for SEO

HTML tables (if they are used for tabular data) make sense to machines — screen readers or search engine crawlers. The tags with attributes such as scope will allow users to identify the column or row headers, leading to improved user experience. With these elements and methodologies, you will be able to easily format tables that your data represents neatly and clearly.

Try It Yourself

Share with friends

Leave a comment

Your email address will not be published. Required fields are marked *