我们使用<caption>标签,在HTML中创建带有标题的表格。标题标签将被插入在<table>标签之后。我们可以为一个表格添加一个标题。默认情况下,该标签的对齐方式是居中的。我们可以使用CSS属性align来改变对齐方式。
以下是HTML的标题标签的语法
<caption>Caption of the table...</caption>
在下面的示例中,我们使用Employees作为标题,创建了一个包含员工姓名和员工ID的表格。
<!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; } </style> </head> <body> <table> <caption>Employees</caption> <tr> <th>EmployeeName</th> <th>EmployeeId</th> </tr> <tr> <td>Yadav</td> <td>022</td> </tr> <tr> <td>Abdul</td> <td>025</td> </tr> <tr> <td>Jason</td> <td>208</td> </tr> </table> </body> </html>
我们可以使用CSS属性align来改变对齐方式。以下是其语法:
<caption style="text-align:value" >Caption of the table...</caption>
在下面的示例中,我们将标题对齐到页面的左侧 -
<!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; } </style> </head> <body> <table> <caption style="text-align: left">Employees</caption> <tr> <th>EmployeeName</th> <th>EmployeeId</th> </tr> <tr> <td>Yadav</td> <td>022</td> </tr> <tr> <td>Abdul</td> <td>025</td> </tr> <tr> <td>Jason</td> <td>208</td> </tr> </table> </body> </html>
让我们看一个创建标题的另一个例子 -
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } </style> </head> <body> <table> <caption>Authors</caption> <tr> <th>JavaFX</th> <th>Krishna</th> </tr> <tr> <td>Scala</td> <td>Satish</td> </tr> </table> </body> </html>