网页开发学习(二):表格

表格

表格所涉及的标签有“表格标签”,“行标签”和“单元格标签”。

< table >…< /table >:表格标签,表示一个表格的开始和结束。
< tr >…< /tr >:行标签,成对出现,包含在表格标签之间,有几对行标签就说明有该表格有几行。
< td >…< /td >:单元格标签,成对出现,包含在行标签之间,有几对单元格标签就说明有该表格有几个单元格。
< th >…< /th >:特殊单元格,表示该单元格为标题,即表头。

属性 说明
border < table >标签的属性。border属性只允许使用值1或0,表示是否显示表格的边框
colspan < td >属性的标签,表示跨多列,如colspan=3表示该单元格跨3列,即横向合并三个单元格
rowspan < td >属性的标签,表示跨多行,作用同上

表格示例:


<html>
<head>
<meta charset="utf-8">
<title>表格应用title>
head>

<body>
	<table border="1">
	    <tr>
			<th colspan="5">学生登记表th>
		tr>
		<tr>
			<th>学号th><th>姓名th><th>年龄th><th>专业th><th>照片th>
		tr>
		<tr>
			<td>201303001td><td>张小凡td><td>18td><td>软件开发td>
			<td>td>
		tr>
		<tr>
			<td>201303002td><td>碧瑶td><td>18td><td>计算机科学与技术td>
			<td>td>
		tr>
		<tr>
			<td>201303003td><td>卢一平td><td>18td><td>法学院td>
			<td>td>
		tr>
	table>
body>
html>

预览结果如图:
网页开发学习(二):表格_第1张图片

这里可以使用img来放照片,不过要格外注意照片的格式,否则会出现照片和表格不相符的情况。

        <tr>
			<td>201303001td><td>张小凡td><td>18td><td>软件开发td>
			<td><img src="file:///E:/HTML5/%E6%95%B0%E6%8D%AE%E5%BA%93%E6%B5%8B%E8%AF%95/image/work1.jpg"/>td>
		tr>

未注意照片格式的效果图:
网页开发学习(二):表格_第2张图片
注意第二张照片右侧有部分空白。


同时也欢迎各位关注我的公众号 南木的下午茶

网页开发学习(二):表格_第3张图片

你可能感兴趣的:(网页开发)