数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用表格标签及其属性设计表格
我们在本文中将执行的任务是使用<table>标签及其属性设计表格。为了创建表格的结构，我们使用<table>，然后使用属性来设计表格。
让我们深入本文，了解更多关于使用<table>标签及其属性创建表格的信息。我们使用<table>标签构建表格，并使用其属性来设计表格。单元格间距、单元格填充、边框、背景颜色和其他属性将用于设计表格。
HTML <table> 标签
有时我们需要在我们的网站或 Web 应用程序中以表格格式显示我们的数据。为此，HTML 中有一个表格标签，由<table>标签定义，并包含其他各种标签，如<tr>、<td>、<th>和<caption>，这些标签对于在我们的网页上完成表格中的数据是必要的。
表格经常用于数据分析，以比较两个或多个数据集，并将文本信息与相应的数值数据一起传达。
语法
以下是 HTML <table> 标签的语法。
<table>…</table>
现在，让我们看看下面的示例，以了解更多关于使用表格标签及其属性创建表格的信息。
示例
以下示例中，我们将使用<table>标签以及border属性来构建表格。
<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
<table border="2">
<tr>
<th>Name</th>
<th>Ipl_Team</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>CSK</td>
<td>India</td>
</tr>
<tr>
<td>Butler</td>
<td>RR</td>
<td>England</td>
</tr>
<tr>
<td>Williamson</td>
<td>GT</td>
<td>NewZealand</td>
</tr>
<tr>
<td>Pooran</td>
<td>LSG</td>
<td>West-Indies</td>
</tr>
</table>
</body>
</html>
运行以上代码后，输出窗口将弹出，显示表格以及填充在表格中的数据，并在网页上应用边框。
示例
考虑以下情况，我们将使用colspan使单元格跨越多个列。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 3px solid #D2B4DE;
border-collapse: collapse;
}
th,
td {
padding: 3px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Employee</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>Rahul</td>
<td>Current:Hyderabad</td>
<td>Permanent:Delhi</td>
</tr>
<tr>
<td>Maya</td>
<td>Current:Vizag</td>
<td>Permanent:Hyderabad</td>
</tr>
<tr>
<td>Raj</td>
<td>Current:Nellore</td>
<td>Permanent:Vijayawada</td>
</tr>
</table>
</body>
</html>
当以上程序执行时，它将生成一个输出，其中包含一个使用colspan的表格，并应用了CSS，显示在网页上。
示例
让我们看看下面的示例，我们将在这个表格中使用标题。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #DFFF00;
border-collapse: collapse;
}
th,
td {
padding: 11px;
}
</style>
</head>
<body>
<table>
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<th>Department</th>
<th>Age</th>
</tr>
<tr>
<td>Kamal</td>
<td>IT</td>
<td>24</td>
</tr>
<tr>
<td>Raj</td>
<td>BPO</td>
<td>22</td>
</tr>
<tr>
<td>Maya</td>
<td>DEVELOPMENT</td>
<td>26</td>
</tr>
<tr>
<td>Sana</td>
<td>ASSOCIATE</td>
<td>27</td>
</tr>
</table>
</body>
</html>
运行以上程序后，它将显示一个输出，其中包含一个在网页上创建的表格，以及应用的CSS和将在网页上显示的标题。
示例
在下面的示例中，我们将向我们将创建的表格添加背景颜色。
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 2px solid #7D3C98;
}
</style>
</head>
<body>
<table style="background-color:#ABEBC6 ">
<tr>
<th>Name</th>
<th>Country</th>
<th>Hobby</th>
</tr>
<tr>
<td>Mani</td>
<td>India</td>
<td>Playing Cricket</td>
</tr>
<tr>
<td>Mamboo</td>
<td>Nigeria</td>
<td>Listening Music</td>
</tr>
<tr>
<td>Black-Widow</td>
<td>Marvel</td>
<td>Avengers Wars</td>
</tr>
</table>
</body>
</html>
当以上代码执行时，它将生成一个输出，其中包含应用了CSS的表格，显示在网页上。
更新于: 2023年9月8日
135 次浏览
广告