首页 > 编程学习 > HTML标签---表格

HTML标签---表格

发布时间:2022/10/1 1:31:51

 目  录 

1.表格的结构

2.表格标签 

3.table标签的标签属性

4.表格的合并属性


1.表格的结构

在默认情况下,表格是没有边框的,如果想要出现边框,就是用border属性。

<table border="1">
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
            </tr>
        </table>

2.表格标签 

标签名描述
table.../table是用来在html页面上创建表格的
th.../th代表列名一般放在第一行
tr.../tr用来定义表格的一行
td.../td用来定义表格的一列

caption.../caption

定义表格标题

3.table标签的标签属性

属性属性值描述
border数字只要不是0,边框就会显示出来,数字越大,最外圈边框会越粗
alignleft,center,right规定表格相对周围元素的对齐方式
bgcolor

颜色名或十六进制颜色表

规定表格的背景颜色

cellpadding

数字或百分数(例:1,10%)

规定单元边沿与其内容之间的空白
cellspacing

数字或百分数(例:1,10%)

规定单元格之间的空白
width

数字或百分数(例:1,10%)

规定表格的宽度。
<table border="1" bgcolor="pink" cellspacing="0" width="300">
			<tr >
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr align="center">
				<td>张三</td>
				<td>男</td>
			</tr>
			<tr align="center">
				<td>李四</td>
				<td>女</td>
			</tr>
			<tr align="center">
				<td>王五</td>
				<td>男</td>
			</tr>
		</table>

补充:caption标签的属性只有align。th标签有属性align,bgcolor,height,width等等。

4.表格的合并属性

以下属性适用于th,tr,td标签,来实现上下纵向合并单元格或者左右横向合并单元格。需要注意的是,当实现了上下合并或左右合并,就应该减掉相应行中的列。

属性属性名描述
colspan数字左右合并,属性值为多少就合并多少个单元格
rowspan数字上下合并,属性值为多少就合并多少个单元格
<table border="3" width="500" height="200">
			<tr align="center" >
				<td colspan="2">ab</td>
				<td>c</td>
				<td>d</td>
			</tr>
			<tr align="center" >
				<td rowspan="2">ei</td>
				<td>f</td>
				<td>g</td>
				<td>h</td>
			</tr>
			<tr align="center">
				<td>j</td>
				<td>k</td>
				<td>l</td>
			</tr>
		</table>


(小编也在努力学习更多哟!以后再慢慢分享的啦!)

希望对友友们有所帮助!!!!

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号