Home > Article > Web Front-end > How to set horizontal header for table?
How to set horizontal header for table?
- WBOYforward
- 2023-09-01 18:05:021118browse
Tables in HTML can have horizontal header and vertical header. For the horizontal header, we need to set all
grammar
The following is the syntax for setting a table horizontal title:
<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>The Chinese translation of
Example 1
is:Example 1
Now let us see an example program to set horizontal header for a table.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
On executing the above program, it will display a table with horizontal headers First Name and Job role.
Example 2
Now, in this second example, we try to create another one with horizontal headers "Name", "Age" and "Technology" 3-line example of −
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Employee Details</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Technology</th>
</tr>
<tr>
<td>Amit</td>
<td>27</td>
<td>Database</td>
</tr>
<tr>
<td>Sachin</td>
<td>34</td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>
Following is the output for the above example program.
Example 3
We can also set a vertical title for the table. Below is an example of creating a vertical header for a table.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>First Name </th>
<td></td>
<td></td>
</tr>
<tr>
<th>Last Name</th>
<td ></td>
<td></td>
</tr>
<tr>
<th>Job role</th>
<td ></td>
<td></td>
</tr>
</table>
</body>
</html>
Following is the output for the above example program.
The above is the detailed content of How to set horizontal header for table?. For more information, please follow other related articles on the PHP Chinese website!