代码拉取完成,页面将自动刷新
一个简单的 HTML 表格,包含两列和两行:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table>
标签定义了一个 HTML 表格。
一个 HTML 表格由一个 <table>
元素和一个或多个 <tr>、<th> 和 <td> 元素。
<tr> 元素定义表格行,<th> 元素定义表格标题,<td> 元素定义表格单元格。
HTML 表格还可以包括 <caption>、<colgroup>、<thead>、<tfoot> 和 <tbody> 元素。
Element | |||||
---|---|---|---|---|---|
<table> | Yes | Yes | Yes | Yes | Yes |
<table>
标签支持 HTML 中的全局属性。
<table>
标签支持 HTML 中的事件属性。
如何向表格添加折叠边框(使用 CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
如何右对齐表格(使用 CSS):
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
如何居中对齐表格(使用 CSS)
<style>
table, th, td {
border: 1px solid black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
<table class="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
如何向表格添加背景颜色(使用 CSS):
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
如何向表格添加填充(使用 CSS):
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
如何设置表格宽度(使用 CSS):
<table style="width:400px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
如何创建表头:
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
</tr>
<tr>
<td>周杰伦</td>
<td>zhou@example.com</td>
<td>123-45-678</td>
</tr>
</table>
如何创建带有标题的表格:
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
如何定义跨越多于一行或一列的表格单元格:
<style>
table, th, td { border: 1px solid black; }
</style>
<table>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>周杰伦</td>
<td>zhou@example.com</td>
<td>123-45-678</td>
<td>021-00-546</td>
</tr>
</table>
HTML 教程: HTML Tables
大多数浏览器将显示具有以下默认值的 <table>
元素:
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。