HTML Table is used by many web developers to store and arrange the data like headings, links, images, and text into rows and columns. HTML Table use table tag <table>, <tr>, <th>, and <td> tag to show the data in the form of rows and columns.
Table Of Content:
HTML Table Structure:
<table> tag is used to create the table and inside the table tag, there are many <tr> tags that represent the table rows. Each row starts with <tr> and close </tr>. Inside each <tr> there are many <th> and <td> tags, <th> represent the table header(heading) by default it is present in the first row but in some cases, we show the table vertically so we change its position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>By default <th> is centered and bold. You can change it with the help of CSS. <td> is called table data or table cell. The content of the table is present in the table cell.
watch a complete video on html table
download full code here github html table
Table Caption:
- <caption> tag is used to give the caption of the table.
- The caption tag is below the table tag and above the row tag.
- The caption tag is by default center of the table.
- However, the CSS property text-align and caption-side can be used to change the location of the caption.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption> Our company</caption>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>HTML Table Border:
We use CSS to change the border of the HTML Table.
We use the border property of CSS.
Following border properties are used in HTML Table
- Border
- Border-collapse
- Border-radius
- Border-style
- border-color
The border is used to give the color and border-collapse is used to remove the border of the <th>, <td> and make only one line of the table head, table cell, and table.
table,th,td{
border: 1px solid red;
border-collapse: collapse;
border-radius: 15px;
border-style:outset;
border-color: blue;
}Table style and color:
A table style is used to make the structure of a table as its border should be dotted, dashed, solid, inset, outset, and double while the table color should be red, black, and another color.
Table radius is used to give the radius of the table as 50% is a circle and 10 to 5 % is good.
HTML Table Width:
There are two ways to set the width of the HTML Table.
The first one is that we directly use the style attributes in the table and set the width and height of the table. Moreover, we can also set the width and height of the <tr>, <th>, and <td> tags by using the style attributes directly.
<table style="width: 100%;"> The second way is that we used the style tag and with the help of the CSS property of width, we set the width and height of the table and also <tr>, <td>, and <th> tags.
table{
width: 100%;
}Table Header:
The table can be horizontal or vertical. So the table header also depends on which type of table should be requiredย
The table is also shown as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption> Our company</caption>
<tr>
<th> Name </th>
<td> Rashid </td>
<td> Ahmad </td>
</tr>
<tr>
<th>Fname </th>
<td> Muhammad iqbal </td>
<td> Mujtaba</td>
</tr>
<tr>
<th> Age </th>
<td> 25 </td>
<td> 21 </td>
</tr>
</table>
</body>
</html>The center or Float of an HTML Table:
HTML Table can be centered or float to the left or right with the help of CSS property. We use the margin property for this purpose because the text-align property does not work in the table.
If we set the margin auto table is centered
<table style=โmargin:1em auto;โ>
We use the float property of CSS to float the table to the left or right and we also set the margin to any corner.
<table style=โfloat:right; margin-left:5px;โ>
Combine or Merge Cells in an HTML Table:
We used Colspan and row span to combine or merge the cell in an HTML Table. To combine multiple columns we use the colspan and to combine multiple rows we use the rowspan.
<th colspan=โ2โ> content</th>
2 column is merged into that content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
table,th,td{
border: 1px solid red;
border-collapse: collapse;
}
</style>
<table>
<caption> Our company</caption>
<tr>
<th colspan="2"> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Rashid </td>
<td> Muhammad iqbal </td>
<td> 25 </td>
</tr>
<tr>
<td> Ahmad </td>
<td> Mujtaba</td>
<td> 21 </td>
</tr>
</table>
</body>
</html>OUTPUT:
<th rowspan=โ2โ> content</th>
2 rows is merged into that content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
table,th,td{
border: 1px solid red;
border-collapse: collapse;
}
</style>
<table>
<caption> Our company</caption>
<tr>
<th > Name </th>
<td> Rashid </td>
<td>Ahmad</td>
</tr>
<tr>
<th rowspan="2"> PHone number </th>
<td> 9233333... </td>
<td> 9233333...s </td>
</tr>
<tr>
<td>+9222... </td>
<td>+9222... </td>
</tr>
</table>
</body>
</html>OUTPUT:
The background color of the HTML Table:
The background color of the HTML Table is set to the rows and it should be used to the nth child of odd or even. We also change the background of the whole table or only specific rows and columns
We use the following code to change the background color of the table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
table,th,td{
border: 1px solid red;
border-collapse: collapse;
}
tr:nth-child(even){
background-color: red;
}
/* th:nth-child(odd),td:nth-child(odd){
background-color: red;
} */
/* th:nth-child(even),td:nth-child(even){
background-color: red;
} */
</style>
<table>
<caption> Our company</caption>
<tr>
<th> Name </th>
<th>Fname </th>
<th> Age </th>
</tr>
<tr>
<td> Rashid </td>
<td> Muhammad iqbal </td>
<td> 25 </td>
</tr>
<tr>
<td> Ahmad </td>
<td> Mujtaba</td>
<td> 21 </td>
</tr>
</table>
</body>
</html>OUTPUT:
About Author
1 thought on โHow to Create responsive HTML Tableโ