html表格的基本属性


本文摘自PHP中文网,作者无忌哥哥,侵删。

表格是最重要的数据化格式工具啦,无论是前台还是后台,都有大量的应用。

我们先打几个网站看一下,页面中哪些内容是用表格做的。

html创建表格使用table标签,这个标签是一个典型的复合标签,因它只写它是没用的,必须要配合内部的子标签才有意义。

创建表格的基本原则是:先创建行,再划分列。一行一列叫一个单元格,用户数据必须全部放在单元格中。

创建行使用标签<tr>,创建列使用标签<td>,标题用<caption>下面我们创建一个最简单的表格。

刚创建的好的表格,你会发现根本不像一个表格,连最基本的表格线都没有,也正为这点,最早的时候表格还用来布局,不过现在不用它的。

下面我们为这个表格添加一些最基本的属性,至少让它看一下像一个表格啦。

border:设置表格边框线的宽度。

cellspacing: 设置单元格之间的间隙,设置为0,相当于单元格边线折叠,这时它自动使用表格的边框宽度,如1。

cellpadding: 设置单元格数据与边界之间的距离,使内容不至于太拥挤。

align: 设置单元格内数据的对方方式,默认为left左对齐,可以设置right右对齐和center居中对齐。

width: 设置表格的宽度,可以为绝对值,也可以是一个百分比相对值,推荐设置为相对值,以自适应数据变化。

height: 设置表格的高度,这里没有设置,以适应表格的行数的变化。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表格的基本属性</title>

</head>

<body>

<table border="1" cellspacing="0" cellpadding="5" align="center" width="80%">

<caption><h3>岛国明星TOP50排行榜</h3></caption>

<!-- bgcolor可以设置行或单元格的背景颜色:skyblue天蓝色 -->

<tr bgcolor="skyblue">

<!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 -->

<th>ID</th>

<th>姓名</th>

<th>腰围</th>

<th>腰围</th>

<th>臀围</th>

</tr>

<tr>

<td align="center">01</td>

<td align="center">波多野结衣</td>

<td align="center">88</td>

<td align="center">59</td>

<td align="center">85</td>

</tr>

<tr>

<td align="center">02</td>

<td align="center">小泽玛利亚</td>

<td align="center">90</td>

<td align="center">60</td>

<td align="center">85</td>

</tr>

<tr>

<td align="center">03</td>

<td align="center">浅川梨奈</td>

<td align="center">87</td>

<td align="center">61</td>

<td align="center">88</td>

</tr>

<tr>

<td align="center">04</td>

<td align="center">深田恭子</td>

<td align="center">86</td>

<td align="center">62</td>

<td align="center">88</td>

</tr>

<tr>

<td align="center">05</td>

<td align="center">苍老师</td>

<td align="center">88</td>

<td align="center">68</td>

<td align="center">90</td>

</tr>

</table>

<!-- 使用之前学过的<a>标签来制作一个简单的分页,这里的<p>标签只起到一个简单的包装作用 -->

<p align="center">

<a href="">首页</a>

<a href="">上一页</a>

<a href="">1</a>

<a href="">2</a>

<a href="">3</a>

<a href="">...</a>

<a href="">下一页</a>

<a href="">尾页</a>

</p>

</body>

</html>

以上就是html表格的基本属性的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html字体颜色如何设置

Html有哪些行内块元素

canvas实现压缩图片的代码示例

Html中css代码放哪里

Html中禁用表单控件有几种方法

怎么设计自己的网页

Html如何实现网页跳转

Html怎么增加一行

浏览器解析渲染Html文档的过程详解(图文)

手把手教你使用img标签添加图片效果(知识)

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...