1 表格样式属性
table 标签上可以直接设置一些外观属性,但这些属性在官方文档中已标记为废弃,了解即可,实际开发统一交给 CSS 处理。
2 各属性说明
| 属性 | 说明 | 示例值 |
|---|---|---|
border | 边框粗细 | 2 |
cellspacing | 单元格之间的间距 | 3px |
cellpadding | 单元格内文字与边框的距离(内边距) | 5px |
width | 整个表格的宽度 | 800px |
height | 整个表格的高度 | 1000px |
align | 表格在页面中的对齐方式 | left / center / right |
bgcolor | 表格背景颜色 | 英文单词 / #fff000 |
2.1 align 对齐方式
left:默认值,靠浏览器左边显示。center:居中显示。right:靠右显示。
2.2 bgcolor 颜色写法
颜色有两种表示方式:用英文单词(red、yellow、blue 等),或用十六进制 RGB 值(#fff000,由 0~9 和 a~f 组成,分别代表红、绿、蓝三个通道)。
3 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
以下属性值,玩一下就行了,之后我们会统一使用css样式来设置.在官方文档当中,已经标记为废弃的属性.
border: 边框
cellspacing: 单元格之间的距离
cellpadding: 文字的内边距
width: 宽度(整个表格的宽度)
height: 整个表格的调度
align: 表格对齐方式
1. left, 默认值,左对齐,靠浏览器左边显示
2. center, 居中显示
3. right, 靠右显示
bgcolor: 背景颜色
颜色写点啥:
1. 常见的表示颜色的英文单词
red, yellow, black, green, blue
2. #fff000 rgb, red, green, blue
0~9, a b c d e f
-->
<table border="2" cellspacing="3px"
cellpadding="5px" width="800px" height="1000px" align="left"
bgcolor="red">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
<tr>
<td>1</td>
<td>张小三</td>
<td>18</td>
<td>男</td>
<td>燕郊</td>
</tr>
<tr>
<td>2</td>
<td>张小三1</td>
<td>12</td>
<td>女</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>张小三1</td>
<td>12</td>
<td>女</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>张小三1</td>
<td>12</td>
<td>女</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>张小三1</td>
<td>12</td>
<td>女</td>
<td>北京</td>
</tr>
</table>
</body>
</html>