![Web前端学习笔记:HTML5+CSS3+JavaScript](https://wfqqreader-1252317822.image.myqcloud.com/cover/365/31304365/b_31304365.jpg)
3.2 表格的基本属性
表格的属性可以分为两大类,分别为作用于<table>标签的和作用于行<tr>、列<td>的属性。下面介绍作用于<table>标签的各种属性。
3.2.1 border:表格边框属性
border属性定义表格边框,属性值可以接收整数类型的数字,表示设置表格的宽度。基本语法如下:
<table border="1"></table>
显示效果如图3-5所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-71.jpg?sign=1738874584-ddS0cMqofylygRWW1253A7oB8j6Kaqw1-0-01066b28982a20865ca790590b738943)
图3-5 表格的边框示例显示效果
注意:如果border的值增大,则只有表格最外围框线增加,每个单元格上的边框并不会变化。表格的border=5时的显示效果如图3-6所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-72.jpg?sign=1738874584-NRvGabqQ0w5GrQSZXk24oMNsjoRhiToD-0-d30993f487f91144ecf603ead5e14c83)
图3-6 表格的border=5时的显示效果
3.2.2 width/height:表格(宽度/高度)属性
width属性和height属性分别定义表格宽度和高度。
基本语法如下:
<table border="1"width="400"height="200"></table>
图3-7所示为宽400px、高200px的表格。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-73.jpg?sign=1738874584-jlR8GOF2f0vokWFtqrBR7QnXOFdEINFJ-0-a1e217a19099d8287e4d97a8c89a17bb)
图3-7 宽400px、高200px的表格
3.2.3 bgcolor:表格背景色属性
bgcolor属性定义表格的背景色,传入一个颜色值,即可修改表格的背景色。
基本语法如下:
<table border="1"bgcolor="red"></table>
执行代码,表格的背景色为红色,显示效果如图3-8所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-74.jpg?sign=1738874584-ujoDKLrquv7mdIa0Yp5HLp2oKZ59hBtg-0-c17a124792386b977dfaea775b5d9b19)
图3-8 表格的背景色为红色的显示效果
3.2.4 background:表格背景图属性
background属性定义表格的背景图,需要传入一张图片的路径地址。当background背景图属性与bgcolor背景色属性同时存在时,背景图会覆盖掉背景色。
基本语法如下:
<table border="1"background="img/img.png"></table>
执行代码,表格的背景为图片,显示效果如图3-9所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-75.jpg?sign=1738874584-Cja0HZD1YyS2lnsMkq5UnR4U7YGsAYzF-0-d8eca8ec03b87815cc3e255c62b380f7)
图3-9 带背景图的表格显示效果
3.2.5 bordercolor:表格边框颜色属性
bordercolor属性定义表格的边框颜色,接收颜色值,修改边框颜色。
基本语法如下:
<table border="1"bordercolor="blue"></table>
执行代码,表格的边框为蓝色,显示效果如图3-10所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-76.jpg?sign=1738874584-zjwbfYyBTyVtAaKWzqh7scdjqF8v6kqt-0-624f4056d890c4eb3eaec88aafb982a3)
图3-10 边框为蓝色的表格显示效果
3.2.6 cellspacing:表格单元格间距属性
cellspacing属性定义表格单元格与单元格之间的间距。从上述各种示例图可知,表格单元格与单元格之间默认存在一定的间距。使用cellspacing属性可以手动调整这个间距的大小。当cellspacing设为0时,单元格之间没有间距。
基本语法如下:
<table border="1"cellspacing="10"></table>
单元格之间间距为默认、0px、10px的情况如图3-11所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-77.jpg?sign=1738874584-Wj2N3lmZ0SLQnKjBsusX13bqpk9rwcvp-0-55a8e95aaaa9221f14d60e92a1153d18)
图3-11 单元格之间间距为默认、0px、10px的情况
注意:使用“cellspace="0"”设置单元格之间没有间距,并不能合并相邻边框。因而,图3-11中的第二个表格的边框是两条线的宽度。
如果需要合并表格边框,则可以使用CSS,基本语法如下:
<table border="1"style="border-collapse:collapse;"></table>
关于CSS部分将在后续讲解,大家可以先简单了解一下。使用这行CSS语法使边框合并后,cellspacing属性将会失效,效果如图3-12所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-78.jpg?sign=1738874584-xIoH4jCesHYxjQNQoIxeGYoYaiaVse5Z-0-43f58456cd16f7f96525e8098906e6b4)
图3-12 边框合并之后的表格效果(边框宽度为条线的宽度)
3.2.7 cellpadding:表格单元格内边距属性
cellpadding属性定义单元格的内边距,即单元格中的文字与单元格边框之间的距离。
基本语法如下:
<table border="1"cellpadding="10"></table>
显示效果如图3-13所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-79.jpg?sign=1738874584-hbSWJEwksL0TJagBgXiNAbLepql89mFC-0-0193dc24b5b888d014464882cd4c548c)
图3-13 cellpadding默认和cellpadding="10"的显示效果
3.2.8 align:表格对齐属性
align属性用于调整表格在其父容器中的位置,可选值有left、center、right,分别表示表格居左、居中、居右。
基本语法如下:
<table border="1"align="center"></table>
显示效果如图3-14所示。
![](https://epubservercos.yuewen.com/B78585/16948916704924306/epubprivate/OEBPS/Images/978-7-111-60090-9-Part01-80.jpg?sign=1738874584-xJ5toaAh0GSuVeiRjn2eXnHBQSJpioMZ-0-d5af84f31570558cce3b5f5bf8e0bec5)
图3-14 表格在浏览器中居左、居中、居右的显示效果
注意:表格的align属性现在不再建议使用。它的相关功能已经被CSS中的浮动(float)所取代,大家了解即可。