html中table标签用法

1.<table><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>biaoge</title></head><body><table border="1" cellpadding="0" cellspa

张九日。

12946人浏览 · 2021-05-29 11:21:48

张九日。 · 2021-05-29 11:21:48 发布

1.<table>

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>biaoge</title>
</head>
<body>
	<table border="1" cellpadding="0" cellspacing="8">
		<tr>
			<td>性别</td>
			<td>年龄</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>19</td>
		</tr>
	</table>
</body>
</html>

显示的网页为： 1.

表格的布局：

table ---定义一个表格
thead ---表格的头部
tbody---表格的身体
tr---行
td ---列
tfoot---尾部

2.常用的属性：

属性—————— 值————————————————描述
align ————right、left、center、justify、char————定义在列组合中内容的水平对齐方式
char ————character ————规定根据哪个字符来对齐列组中的内容
charoff ————number ————规定第一个对齐字符的偏移量
span ————number ————规定列组应该横跨的列数
valign ————top、middle、bottom、baseline ————定义在列组合中内容的垂直对齐方式
width ————pixels% ————规定列组合的宽度

border 1px 设置边框
width npx,n % 表格宽度
bgcolor 颜色值表格背景
align left,center,right 表格在文档中的对齐方式
cellpadding n px 内容和边框之间的间距
cellspacing n px 单元格之间的间距

例：

	<table border="1" width="100px"height="100px" align="center" cellspacing="1" cellpadding="1" >

页面显示：

3.表格的嵌套：

3.1 简单的一个表格嵌套:

<table width="300" border="1">
 <tr>
    <td>&nbsp;</td> 
    <td>
        <table width="100" border="1" align="center">
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td> 
          </tr> 
        </table> 
    </td> 
 </tr>
</table>

下面是我自己做的一个表格嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格嵌套</title>
</head>
<body>
      <table width="500" height="200" border="1" cellspacing="0" align="center">
      <thead bgcolor="#66ffff">
      <tr height="50">
      	<td width="100"> 网站logo</td>
      	<td width="400"> 网站banner</td>
      </tr>
      </thead>
      
      <tbody>
      <tr height="100">
      	<td width="100">
      		<table border="1" cellspacing="0" cellpadding="0" align="center" >
			<tr>
				<td>网站导航</td>
			</tr>
			<tr>
				<td>网页导航</td>
			</tr>
			<tr>
				<td>网页导航</td>
			</tr>
			<tr>
				<td>网站导航</td>
			</tr>
			<tr>
				<td>网页导航</td>
			</tr>
			<tr>
				<td>网页导航</td>
      		</table>
		</td>
		<td width="400" height="100">
		<table width="380" height="100" border="1" bordercolor="#cc9933" cellspacing="2" cellpadding="5">
		<tr>
			<td>网站板块</td>
			<td>网站板块</td>
		</tr>
		<tr>
			<td>网站板块</td>
			<td>网站板块</td>
		</tr>
		</table>
		</td>
		</tr>
		</tbody>
		<tfoot bgcolor="#fff000">
			<tr height="50" >
				<td align="center" colspan="2">版权信息</td>
			</tr>
		</tfoot>
      </table>
</body>
</html>

网页显示如下：

4.表格的合并：

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

合并单元格的思想：将多个内容合并的时候就会有多余的东西出来，将其删除。如：将3个td合并成一个，那就多余了2个td,则将多余的两个td删除。
公式：删除的个数=合并的个数-1
如将3个单元格合并成一个，则应删除多余的2个。
单元格合并的次序：从上至下
从左至右

简单表格合并：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格合并</title>
</head>
<body>
	<table  width="200"border="1">
		<tr>
			<td colspan="3">成绩</td>
		</tr>
		<tr>
		    <td rowspan="2">张三</td> 
			<td>语文：99</td>
			<td>数学：100</td>
		</tr>
		<tr>
			<td>物理：99</td>
			<td>化学：100</td>
		</tr>
	</table>
</body>
</html>

网页显示：