html表格

最新推荐文章于 2025-05-14 18:18:51 发布

原创最新推荐文章于 2025-05-14 18:18:51 发布 · 358 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html表格

基础专栏收录该内容

79 篇文章

订阅专栏

博客围绕HTML表格展开，介绍了表格属性、表头标签、合并单元格（包括跨列和跨行合并）等内容，还重点提及了input控件的表格形式及input控件本身，并给出了相关源代码。

表格

<table>    <!-- 表格标签 是一个四方块 盒子 -->
		<tr>  <!-- 行标签 -->
			<td>性别</td>  <!-- 单元格标签 -->
			<td>身高</td>
			<td>年级</td>
</table>

如：

性别

身高

年级

表格注意事项：<tr></tr>只能嵌套<td></td>
                         而<td></td>内可容纳替其他

表格属性

border  边框
cellspacing  单元格与单元格边框间距
cellpadding  单元格内容与单元格边框间距
width  宽度
height  长度
 align  表格在网页中的水平对齐方式  （其中用left、center、right)

表头标签

<th></th>

表格中   主<thead></thead>（夹在<table></table>内<tr></tr>外 ）
              体<tbody></tbody>（夹在<table></table>内<tr></tr>外在<thead></thead>下 ）

如：

性别	身高	年级
女	156	17
男	180	18

合并单元格

合并单元格有：
            跨行合并：rowspan
            跨列合并:colspan

跨列合并

（截取的部分内容解释）
          <tr>  <!-- 行标签 -->
			 	<td>男</td>  <!-- 单元格标签 -->
				<td colspan="2">180</td>
	      </tr>	
  (在<td></td>的开始标签中加colspan="2"
   注意：在使用跨列标签时，需找准不需要的那一列位置并清除)

如：

性别	身高	年级
女	156	17
男	180

跨行合并

（截取的部分内容解释）
	<tbody>
			<tr>  <!-- 行标签 -->
				<td rowspan="2">女</td>  <!-- 单元格标签 -->
				<td>156</td>
				<td>17</td>
			</tr>
			<tr>  <!-- 行标签 -->
			 	 <!-- 单元格标签 -->
				<td colspan="2">180</td>
		    </tr>
	</tbody>
	(在<td></td>的开始标签中加rowspan="2"
	 注意：在使用跨行标签时，需找准不需要的一那行位置并清除)

如：

性别	身高	年级
女	156	17
女	180

input控件表格形式

input控件（重点)

属性	属性值	描述
type	text	文本框
	password	密码
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submi	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	自定义	控件的名称
value	自定义	input控件在页面中的默认文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选项控件默认被选中的项
mexlength	正整数	控制允许输入是最多字符数

源代码：

<body>
	<h3 align="center">input控件（重点)</h3>
	<table border="1" cellspacing="0" cellpadding="5" height="400" width="500" align="center"><!-- 表格标签 -->
		<thead>
		<tr>
				<th>属性</th>
				<th>属性值</th>
				<th>描述</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="9">type</td>
				<td>text</td>
				<td>文本框</td>
			</tr>
			<tr>
				<td>password</td>
				<td>密码</td>
			</tr>
			<tr>
				<td>radio</td>
				<td>单选按钮</td>
			</tr>
			<tr>
				<td>checkbox</td>
				<td>复选框</td>
			</tr
			<tr>
				<td>button</td>
				<td>普通按钮</td>
			</tr>			
			<tr>
				<td>submi</td>
				<td>提交按钮</td>
			</tr>
			<tr>
				<td>reset</td>
				<td>重置按钮</td>
			</tr>
			<tr>
				<td>image</td>
				<td>图像形式的提交按钮</td>
			</tr>
			<tr>
				<td>file</td>
				<td>文件域</td>
			</tr>
			<tr>
				<td>name</td>
				<td>自定义</td>
				<td>控件的名称</td>
			</tr>
			<tr>
				<td>value</td>
				<td>自定义</td>
				<td>input控件在页面中的默认文本值</td>
			</tr>
			<tr>
				<td>size</td>
				<td>正整数</td>
				<td>input控件在页面中的显示宽度</td>
			</tr>
			<tr>
				<td>checked</td>
				<td>checked</td>
				<td>定义选项控件默认被选中的项</td>
			</tr>
			<tr>
				<td>mexlength</td>
				<td>正整数</td>
				<td>控制允许输入是最多字符数</td>
			</tr>
	</tbody>
	</table>
</body>