表格(table)的应用:
表格的创建:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title> <--表格标记-->
</head>
<body><table><tr> <--行标记--><td>第一行第一列</td> <--单元格标记--><td>第一行第二列</td></tr> <tr><td>第二行第二列</td><td>第二行第三列</td></tr></table>
</body>
</html>
输出:
第一行第一列 第一行第二列
第二行第二列 第二行第三列
表格中一些其它的关键字:
captyion:标题运用通过“<caption>表格的标题</caption>”来实现。标题可以认为是在整个表格的最上方添加了一个没有边框的行。
th:表头,意味加粗显示“<th>第一行第三列加粗显示</th>”,与<td></td>同级。
简单的知道了如何的创建表格,下面我们开始介绍表格的一些属性。
表格<table>的简单属性:
width:宽度,意味设置表格的宽度,单位就是px(像素),也可以是占浏览器的百分比(width="100"或者是width="90%")等。
height:同比向width。
align:设置表格的对齐方式,有左对齐left,右对齐right,居中对齐:center。
border:设置表格的边框效果,数值越大表格边框越粗。
bordercolor:边框的颜色。这时候边框的宽度不能为0否则显示不出效果,颜色为十六进制的颜色代码。
cellspacing:表格内框的宽度。
cellpadding:表格内文字与边框的间距,数值不能不限制的进行调整,因为它对边框的上下左右都有效,数值设置过大会影响表格的设定宽高。
bgcolor:表格的背景设置。
background:为表格设置背景图片,图片可以是绝对路径也可以是相对路径。与bgcolor只有一个起效果。
<tr>属性:
<td>属性:
练习:
table表格也可以用来进行简单的布局,尝试将两张图片利用table进行居中(显示在网页的中间)拼接。如下:
相关练习代码与资源:https://u062.com/dir/26395293-39721853-c328a7
业余爱好者,有问题练习哦!
注意:表格的各种属性的设置要在<table>与</table>之间完成。