HTML Table Tag


HTML

Tag

HTML

Tag is used to display data in tabular form (row*column). A row can have multiple columns and rows.

We can create a table to display data in the form of a table, using the

Tag with the help of , Tag, the table header is defined by the
and elements.

In each table, the table row is defined by the

, and the table data is defined by the Tag.

HTML tables are used to manage the layout of the page e.g. Header section, navigation bar, body content, footer section, etc. But it is recommended to use div tags on tables to manage the layout of the page.

HTML Table Tags

  • table
  • tr
  • th
  • td
  • caption
  • colgroup
  • col
  • tbody
  • theader
  • tfooter

We will see a few examples of HTML Table Tags below:-

A simple HTML table, containing two columns and two rows:

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Month Savings
January $100

Output:-

How to add collapsed borders to a table (with CSS):

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Month Savings
January $70
February $40

Output:-

How to right-align a table (with Inline CSS):

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Month Savings
January $100
February $80

This is some text to be wrapped around the table. This is some text to be wrapped around the table. This is some text to be wrapped around the table.

Output:-

How to center-align a table (with CSS):

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

How to center-align a table

Month Savings
January $100
February $80

Output:-

How to add background-color to a table (with CSS):

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Month Savings
January $100
February $80

Output:-

How to add padding to a table (with CSS):

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Month Savings
January $100
February $80

Output:-

How to set table width (with CSS):

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Month Savings
January $100
February $80

Output:-

How to create table Horizontal headers:

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Horizontal headers:

Name Email Phone
John Doe john.doe@example.com 123-45-678

Output:-

How to create table Vertical headers:

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Vertical headers:

Name: John Doe
Email: john.doe@example.com
Phone: 123-45-678

Output:-

How to create a table with a caption:

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Monthly savings
Month Savings
January $100
February $80

Output:-

How to define table cells that span more than one row or one column:

Example:-




    

    
        HTML table Tag
    

 

This is HTML table tag Example

Colspan and rowspan

Cell that spans two columns:

Name Email Phone
John Doe john.doe@example.com 123-45-678 212-00-546

Cell that spans two rows:

Name: John Doe
Email: john.doe@example.com
Phone: 123-45-678
212-00-546

Output:-


Leave a Comment