第一篇博客，学习用《html实现简单表格的制作》，以后还请自己多多关照。

shufinnliu
187 阅读1分钟

编辑器：HbuilderX
浏览器：谷歌浏览器chrome

先上源码1：

	<title></title>
</head>
<body>
	<h3>前端技术阶段划分标准</h3>
	<table border="1px" cellspacing="0">
		<tr>
			<td width="150px" align="center"></td>
			<td width="150px" align="center">初级</td>
			<td width="150px" align="center">中级</td>
			<td width="150px" align="center">高级</td>
			<td width="150px" align="center">专家</td>
		</tr>
		<tr>
			<td width="150px" align="center">标准</td>
			<td width="150px" align="center">被产品怼的说不出话</td>
			<td width="150px" align="center">跟产品怼的不相上下</td>
			<td width="150px" align="center">怼的产品没话说</td>
			<td width="150px" align="center">把产品怼辞职</td>
		</tr>
		<tr>
			<td width="150px" align="center">用户A</td>
			<td width="150px" align="center"></td>
			<td width="150px" align="center"></td>
			<td width="150px" align="center"></td>
			<td width="150px" align="center"</td>
		</tr>
		<tr>
			<td width="150" align="center">用户B</td>
			<td width="150" align="center"></td>
			<td width="150" align="center"></td>
			<td width="150px" align="center"></td>
			<td width="150px" align="center"></td>
		</tr>
		<tr>
			<td width="150px" align="center">用户C</td>
			<td width="150px" align="center"></td>
			<td width="150px" align="center"></td>
			<td width="150px" align="center"></td>
			<td width="150px" align="center"></td>
		</tr>
		
	</table>
</body>

源码1效果截图：

image.png

以下是源码2（实现同样效果）：

	<title></title>
</head>
<body>
	<h3>前端技术阶段划分标准</h3>
	<table border="1px" cellspacing="0">
		<col width="200px">
		<col width="200px">
		<col width="200px">
		<col width="200px">
		<col width="200px">
		<col width="200px">
		<tr align="center">
			<td></td>
			<td>初级</td>
			<td>中级</td>
			<td>高级</td>
			<td>专家</td>
		</tr>
		<tr align="center">
			<td>标准</td>
			<td>被怼的说不出话</td>
			<td>跟这个产品怼的不相上下</td>
			<td>怼的产品没话说</td>
			<td>直接把产品怼辞职</td>
		</tr>
		<tr align="center">
			<td>用户A</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr align="center">
			<td>用户B</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr align="center">
			<td>用户C</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		
	</table>
</body>

源码2效果截图：

image.png

总结：

  1. <table>...</table> <!--表格标签-->
  2. <tr>...</tr> <!--表示表格中的一行-->
  3. <td>...</td> <!--表示一个单元格-->
  4. <col> <!--单标签，表示一列-->
  5. border="1px"　表格边框属性
  6. cellspacing="0" 设置单元格空隙
  7. align="center" 设置单元格的对齐方式

  8. 若不在table标签中设置一下border标签，则默认不显示边框

  9. 若不在table标签中设置cellspacing标签，则默认单元格空隙为1

  10. 源码2中，在table标签内写入标签<col width="200px">效果等同于在 当前列 的每个td中写入width="200px"

  11. 源码2中，我故意多写了一个<col width="200px">，可以看到多出了一列。

  12. 源码2中，在tr标签内写入align="center"效果等同于在 当前行的每个td中写入align="center"
avatar
文章
阅读
粉丝