一.基本标签
二.实体符号
三.表格
因为我们的数据库的增,删,改,查主要由网页的表格呈现的,所以对于表格这一块比较重要。
一对<table></table>
标签表示一个表格,而一对 <tr></tr>
标签表示表格的一行,一对 <td></td>
表示表格的一列。
一个实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border = "1px" width = "500px" height = "500px" align = center>
<tr border = "10px" align = center>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr border = "3px" align = center>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr border = "3px" align = center>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
四.表格合并
row合并(行合并):删除下面行的单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border = "1px" width = "500px" height = "500px" align = center>
<tr border = "10px" align = center>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr border = "3px" align = center>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr border = "3px" align = center>
<td colspan = "2">g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
f合并了i.
col合并(列合并):删除那个无所谓。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border = "1px" width = "500px" height = "500px" align = center>
<tr border = "10px" align = center>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr border = "3px" align = center>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr border = "3px" align = center>
<td colspan = "2">g</td>
<!--
<td>h</td>
-->
<td>i</td>
</tr>
</table>
</body>
</html>
g合并h.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border = "1px" width = "500px" height = "500px" align = center>
<tr border = "10px" align = center>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr border = "3px" align = center>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr border = "3px" align = center>
<!--
<td >g</td>
-->
<td colspan = "2">h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
h合并g.
补充:th和td的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border = "1px" width = "500px" height = "500px" align = center>
<tr >
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr border = "3px" align = center>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr border = "3px" align = center>
<!--
<td >g</td>
-->
<td colspan = "2">h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
我们对第一行改成td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border = "1px" width = "500px" height = "500px" align = center>
<tr >
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr border = "3px" align = center>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr border = "3px" align = center>
<td >g</td>
<td >h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
可以看出th比td多的功能为居中,加粗。
补充2:thead,tbody,tfoot不是必须的,只是为了后面js代码的编写。如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border = "1px" width = "500px" height = "500px" align = center>
<!--头-->
<thead>
<tr >
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<!--体-->
<tbody>
<tr border = "3px" align = center>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</tbody>
<!--体-->
<tfoot>
<tr border = "3px" align = center>
<td >g</td>
<td >h</td>
<td >i</td>
</tr>
</tfoot>
</table>
</body>
</html>