How to set horizontal header for table?-HTML Tutorial-php.cn

How to set horizontal header for table?

WBOY

Release： 2023-09-01 18:05:02

forward

1131 people have browsed it

Tables in HTML can have horizontal header and vertical header. For the horizontal header, we need to set all

inside a single tag.

grammar

The following is the syntax for setting a table horizontal title:

<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>
Copy after login
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>
Copy after login

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>
Copy after login

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>
Copy after login

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!