HTML table Tag | How to Create table in website?
HTML table Tag
We all are familiar with the concept of tables with rows and columns. But how would you create a table in a website? HTML table tag family displays a table in a webpage. It's similar like the structure of a matrix with proper rows and columns. This type of structure with rows and columns is very helpful in representing data in an organized manner. The tabular form of data creates a good impression on user.
Today we will learn about all HTML table tags that will help you to create a table for your data.
Example of HTML table tags:
Let's see the first example of how use HTML tags. Just observer the example for now; we have explained each tag one by one after the example.
In the above html table, there are 3 rows and 4 columns = 3 * 4 = 14 table cells.
Table Cell ( <td> / <th>)
- < th > / table heading:
<th>is a paired tag with</th>as a closing tag. Each pair of these tags represents a cell in a row.<th>tag is displayed in bold font, and centered aligned by the browser. Because of its properties this tag is used only for writing headings in the table.
<th>Name</th>
- < td > / table data: It is a paired tag with
</td>as a closing tag. It can only be used inside<tr>. After declaring rows, the<td>tags are used to enter data in the table.
<td>alen</td>
Table row (<tr>)
HTML table row is defined by <tr> tag. It is a paired tab with </tr> as a closing tag. Whatever written between these tags will be displayed in a single row of the table.
To create a new row, add another <tr> tag after closing the previous one.
<tr>
<td>1</td>
<td>alen</td>
<td>200</td>
<td>pass</td>
</tr>
List of All table tags
| Tag | Description |
|---|---|
| < table > | Define a table |
| < thead > | Groups the header content in table |
| < tbody > | Groups the body content in table |
| < tr > | Defines a row in a table |
| < th > | Define a header cell in a table |
| < td > | Define a cell in a table |
| < caption > | Define a table caption |
| < caption > | Specifies a group of one or more columns in a table for formatting |
| < caption > | Specifies column properties for each column within a <colgroup> element |
HTML Table Attributes
The <table> tag in HTML has many attributes that define the structure of the table. These attributes can make a table look a bit more attractive. Let's see one by one the different attributes of the table tag and then we will see the changes in the table
HTML table border attribute
HTML table border attribute is used to specify borders in a table. It means that, by default the borders in the table are hidden and if you don't specify borders then your table will only display data but there would be no border.
The table border attribute has two values 0 and 1. 0 means no border and 1 means visible boders. You can also increase the values to 2, 3, 4 etc. It will increase the width of the border.
There are two ways to specify border for HTML tables: - By border attribute of table in HTML - By CSS borders property.
Look at the example below to define an HTML border with border attribute:
HTML Table border using CSS
HTML Table colspan and rowspan attributes
HTML table colspan and rowspan attribute are used with the <td> tag. As the name suggest colspan is related to columns and rowspan is related to rows.
HTML Table colspan attribute
HTML table colspan attribute is used to merge two or more columns into a single column. Single column occupies space of the number of merged columns. Loot at the example:
HTML Table rowspan attribute
HTML table rowspan attribute is used to merge two or more rows together to form a single row. A single row occupies space of the number of merged rows. Look at the example: