实例
例子 1
一个简单的 HTML 表格,包含两列和两行:
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
亲自试一试
例子 2
如何向表格添加折叠边框(使用 CSS):
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
二月 | ¥4500 |
亲自试一试
例子 3
如何右对齐表格(使用 CSS):
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
二月 | ¥4500 |
亲自试一试
例子 4
如何居中对齐表格(使用 CSS):
table, th, td {
border: 1px solid black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
二月 | ¥4500 |
亲自试一试
例子 5
如何为表格添加背景颜色(使用 CSS):
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
二月 | ¥4500 |
亲自试一试
例子 6
如何向表格添加内边距(使用 CSS):
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
二月 | ¥4500 |
亲自试一试
例子 7
如何设置表格宽度(使用 CSS):
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
二月 | ¥4500 |
亲自试一试
例子 8
如何创建表头:
姓名 | 电邮 | 电话 |
---|---|---|
Bill Gates | bill.gates@example.com | 138-1234-5678 |
亲自试一试
例子 9
如何创建带标题的表格:
月份 | 储蓄 |
---|---|
一月 | ¥3400 |
二月 | ¥4500 |
亲自试一试
例子 10
如何定义跨越多行或多列的表格单元格:
姓名 | 电邮 | 电话 | |
---|---|---|---|
Bill Gates | bill.gates@example.com | 138-1234-5678 | 186-2345-6789 |
亲自试一试