表格操作和练习

这里我来总结一下表格的基本操作。下面我给出表格的完整机构(以前都没有用过耶)

表头和表尾:thead,tfoot

表格主体内容:tbody

好了,代码实例

<table border="0"width="800" 
			 summary="标准" cellspacing="10" cellpadding="10"
			 bgcolor="red"
			 font:white>
			<tbody>
			<h1>MARVEL漫画官方能力参考</h1>
			<tfoot>啦啦啦</tfoot>
			
			<tr>
				<td>属性</td>
				<td>备注</td>
				<td>分级</td>
			</tr>
			<tr>
				<td>智力</td>
				<td>思考和处理信息的能力</td>
				<td>⒈迟钝/削弱、⒉正常、⒊有学识、⒋有天赋、⒌天才、⒍超级天才、⒎无所不知</td>
			</tr>
			<tr>
				<td>力量</td>
				<td>举起/承受重物的能力</td>
				<td>⒈较弱(不能承受与自身等同重量的物体)、 ⒉正常(能够承受与自身等同重量的物体)、 ⒊常人极限(能够承受自身2倍重量的物体)、 ⒋超出常人(800pt~25t)、⒌超出常人(25t~705t)、 ⒍超出常人(705t~1000t)、⒎难以计算(超过1000t)
				</td>
			</tr>
			<tr>
				<td>速度</td>
				<td>在地球上移动的能力</td>
				<td>⒈正常以下、⒉正常、 ⒊超出常人(但不高于时速700英里)、 ⒋音速(1马赫)⒌超音速(2马赫)、 ⒍光速(每秒1860000英里)、 ⒎速度失真(超光速)
				</td>
			</tr>
			<tr>
				<td>耐力</td>
				<td>抗击或身体恢复的能力</td>
				<td>⒈较弱的、⒉正常的、⒊增强的、 ⒋可再生的、⒌可防弹的、 ⒍超出常人、⒎近乎不死的
				</td>
			</tr>
			<tr>
				<td>战斗技能</td>
				<td>徒手搏斗的程度和战斗能力</td>
				<td>⒈不善长、⒉一般的、⒊受过一些训练、 ⒋有经验的战士、⒌精通一种格斗方式、 ⒍精通几种格斗方式、⒎精通全部格斗方式
				</td>
			</tr>
			<tr>

这是一个漫威官方能力参考表格,内容来自百度百科(闲话)。

这里主要设置了表格的高度、宽度,内容距单元格间的距离,单元格之间的间距。表格的背景颜色

好了,这里有个小难点(需要注意下)

colspan:跨行合并,合n个则把其后的n-1个<td>删除

 rowspan:跨列合并,同上(tr)

因为跨行后会影响其他单元格,造成bug。所以,小伙伴要提前准备。这里给出我钻研后的结果

这里实现了表格的跨列合并。

最后,效果图来了


猜你喜欢

转载自blog.csdn.net/mover999/article/details/80456964