HTML Tables

HTML Tables

An HTML tables are used to store data in tabular format means row and column. A row can put many columns inside it. Row and column form many table cells. This table cell contains data.

  • HTML <table> tag is used to represent HTML table.
  • HTML <tr> tag is used to represent HTML table row.
  • HTML <td> tag is used to represent HTML table data.
  • HTML <th> tag is used to represent HTML table header.
  • HTML <thead> tag is used to group table header content.
  • HTML <tbody> tag is used to group table body content.
  • HTML <tbody> tag is used to group table footer content.

Quick Tips

Here <table> tag is used to create a table, the tag is used to highlight the header information, represents a cell of the table, represents table row while as represents the table body section.

HTML Table Example

Source Code

Try it now
Here <table> tag is used to create a table, <th> tag is used to highlight the header information, <td> represents a cell of the table ,<tr> represents table row while as represents the table body section.

HTML Table With Border

Source Code

Try it now

HTML table border can be set by <table> boder attribute.

HTML Table Border Collapsing

Source Code

Try it now

HTML table border collapsing can be done by CSS border-collapse property:

table, th, td { border: 1px solid black; border-collapse: collapse; }

Table Row And Column Spanning Concept

HTML table row and column can be extended using rowspan and colspan attributes. Basically, it extends a single cell into either multi-column or multi-row.

HTML Table Colspan Example

Source Code

Try it now
  • =>Table spanning concept works in row and column
  • =>Table colspan attribute extends a cell more than one column.
  • =>Table rowspan attribute extends a cell more than one row.

Creating Table With Table Header,Body & Footer Attribute

Source Code

Try it now
HTML provides different table attributes <thead>, <tbody>, and <tfoot>.It creates most structureful table data having table header,table body and table footer.

HTML Table Captions

Source Code

Try it now

HTML table caption can be provided by placing <caption> tag after <table> tag.It is basically denoted the the name of the table.

Online Test / Quiz