W3C Designer

how to make table in html

8/23/2021
Hacker

A table is a structured combination of data made up of rows and columns which is called tabular data. A table allows users to quickly and easily look up values that indicate some types of connection between various types of data.

The creators of HTML provided a means to structure and show tabular data on the web.

table tags in html

HTML Tables

The HTML tables allows web developers to arrange data (Such as text, preformatted text, images, links, forms, form fields, other tables, etc.) into rows and columns of cells.

HTML table is used to manage the layout of the webpage such as header section, navigation bar, body contents, footer sections etc. But it's recommended to use <div> tag over table element to manage the layout of the web page .

The HTML tables are created by using the <table> tag

We can create a table to display data in tabular formate, by using <table< element, with the help of <tr< tag, <td< tag, and <th< tag or elements.

An HTML table consists of single <table> element and one or more <tr>, <th>, and <td> elements.

The HTML <table> element represents tabular formate of data — that is, information presented in the two-dimensional table comprised of rows and columns of cells including data.

Syntax

<table> <tr> <td>.....</td> ..... .... </tr> <tr> .. ... .. .... </tr> .. ..... ........ </table>

You can Understood the html table from following example line

Example of html table

<table> <tr> <td>Row 1 and Column 1</td> <td>Row 1 and Column 2</td> </tr> <tr> <td>Row 2 and Column 1</td> <td>Row 2 and Column 2</td> </tr> </table>

Output

It will give following output on webpage.

Row 1 and Column 1 Row 1 and Column 2
Row 2 and Column 1 Row 2 and Column 2

The <tr> tag is used to create rows of table and <td> tag is used to create data cells in table row. The contents under <td> tags are regular and left aligned by defaultly

Note - The <table> tag also supports the Global and Event Attributes in HTML.

You can also create various types of tables using different CSS properties in your table.

HTML Table Tags

Many more tags are used inside the table tag to create a table in HTML. The short description of all these is given in the table below.

TagDescription
<table>The Table tag defines a table in html.
<tr>tr tag defines a row inside a table.
<th>th tag defines a header cells inside a table.
<td>td tag defines a cell in the html table.
<caption>Captions defines a caption of table.
<colgroup>It defines a group of two or more columns in the table for formatting.
<col>It is used with the <colgroup> element to specify column properties for every column.
<tbody>It is used to group the body content of a table.
<thead>It is used to group the header content inside a table.
<tfooter>It is used to group the footer content of table.

Finally We can create table in htm by using table tags and its attributes.

If you want to style table you can use CSS properties and table tag attributes.

In our next chapter you will learn about html attributes


No comments:

Post a Comment