HTML中的表格由 <table>标签来定义，表格是由单元格组成的，单元格可以放入文字、图片、表格等内容。下面，我们来看看如何用HTML来制作表格吧。
代码，先用<table>标签定义一个表格，其中border表示边框，border="1"表示边框为1个像素，数值越大，边框就越粗。<table border="1">
</table>
<tr>元素表示表格中的行，比如创建两行<tr></tr>表示一行。
单元格HTML表格的单元格用<td>标签表示，如下图所示：
<td>语文</td>
表格就做好一个HTML表格，显示图如下：
总代码：
<body>
<table border="1">
<tr>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
<td>化学</td>
</tr>
特别提示表格的标签：<table>、<tr>、<td>三个标签。
代码（大小有需要可以调）：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>练习使用HTML</title>
</head>
<body>
<center>
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<td colspan="4" height="60px"></td>
</tr>
<tr>
<td width="200px" height="60px"></td>
<td width="200px" height="60px"></td>
<td width="200px" height="60px"></td>
<td width="200px" height="60px"></td>
</tr>
<tr>
<td colspan="4" height="60px"></td>
</tr>
<tr>
<td colspan="4" height="60px"></td>
</tr>
<tr>
<td colspan="4" height="60px"></td>
</tr>
<tr>
<td colspan="4" height="60px"></td>
</tr>
</table>
</center>
</body>
</html>
运行效果：
用到拆分合并单元格，手写挺麻烦的，先用dw在设计视图片实现，然后再返回代码视图，复制即可.代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table width="268" height="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="50" colspan="2" bordercolor="#0000FF"></td>
<td rowspan="4" bordercolor="#0000FF"><table width="100%" height="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="75" bordercolor="#0000FF"></td>
</tr>
<tr>
<td height="125" bordercolor="#0000FF"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50" colspan="2" bordercolor="#0000FF"></td>
</tr>
<tr>
<td height="50" bordercolor="#0000FF"></td>
<td height="50" bordercolor="#0000FF"></td>
</tr>
<tr>
<td height="50" bordercolor="#0000FF"></td>
<td height="50" bordercolor="#0000FF"></td>
</tr>
</table>
解释如下：
先插入四行两列的表格，第一列通过合并单元格来实现，第二列将所有单元格合并，然后新插入一个两行一列的表格即可实现上述效果.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）