幕客前端基础入门-html表格

1.表格的结构

<table><!--表格开始-->
	<tr><!--行-->
		<td></td><!--单元格-->
	</tr>
</table><!--表格结束--> 

2.带表头的表格

<!--<th>定义表头：表格头：内容居中，加粗展示
<td>定义普通单元格：内容不会加粗，默认左对齐-->
<table>
      <tr>
            <th>这是表格头</th><!--表格头-->
      </tr>
      <tr>
            <td></td>
      </tr>
</table> 

3.带标题的表格

<!--<caption>紧跟在table后面，一个表格只能有1个标题-->
<table>
      <caption>这是表格的标题</caption>
	<tr><!--行-->
		<td></td>
	</tr>
</table>

4.带结构的表格

浏览器在解析html时，表格是作为一个整体来解析的。整个表格解析完之后，才会被显示出来。如果表格很复杂很长，表格需要的加载时间很长，会导致用户体验不好。所以使用表格结构标签来优化展示，让它加载一部分就显示一部分。不用等整个表格加载完毕再进行显示。

<!-- 表格划分为三部分：表头、主题、脚注。
<thead>：表格的头（放表格的头）
<tbody>：表格的主体（放数据主体）
<tfoot>：表格的脚（放表格的脚注）-->
<table>
      <caption>这是表格的标题</caption>
      <thead><tr><th>表格头</th></tr></thead>
      <tbody><tr><td>表格主体</td></tr></tbody>
      <tfoot><tr><td>表格的脚注</td></tr></tfoot>
</table>

5.表格属性

表格属性

属性	值	描述
width	pixels，%	规定整个表格的宽度
align	left、right、center	表格相对周围元素的对齐方式
border	pixels	规定表格边框的宽度
bgcolor	rgb(255,0,0)、#ffa500(16进制)、orange(颜色名)	表格的背景颜色
cellpadding	pixels，%	单元格边沿与其内容之间的空白
cellspacing	pixels，%	单元格之间的空白
frame	属性值	规定外侧边框的那个部分是可见的
	void	不显示外侧边框
	above	显示上部的外侧边框
	below	显示下部的外侧边框
	hsides	显示上部和下部的外侧边框
	vsides	显示左边和右边的外侧边框
	lhs	显示左边的外侧边框
	rhs	显示右边的外侧边框
	box	在所有的四个边上显示外侧边框
	border	在所有的四个边上显示外侧边框
rules	属性值	规定内侧边框的那个部分是可见的
	none	没有线条
	groups	位于行组和列组之间的线条
	rows	位于行之间的线条
	cols	位于列之间的线条
	all	位于行和列之间的线条

---

列属性

属性	值	描述
align	left,right,center,justify,char	行内容的水平对齐
valign	top,middle,buttom,baseline	行内容的垂直对齐方式
bgcolor	rgb(255,0,0)、#ffa500(16进制)、orange(颜色名)	行的背景颜色

---

单元格属性

属性	值	描述
align	left,right,center,justify,char	单元格内容的水平对齐
valign	top,middle,buttom,baseline	单元格内容的垂直对齐方式
bgcolor	rgb(255,0,0)、#ffa500(16进制)、orange(颜色名)	单元格的背景颜色
width	%,pixels	单元格的宽度
height	%,pixels	单元格的长度

thead,tbody,tfoot标签属性

属性	值	描述
align	left,right,center,justify,char	thead,tbody,tfoot内容的水平对齐
valign	top,middle,buttom,baseline	thead,tbody,tfoot内容的垂直对齐方式

6.表格跨列属性

使用colspan可以是表格跨列

<table>
      <tr>
            <td colspan="2">xx</td>
            <td>xxx</td>
      </tr>
      <tr>
            <td>y</td>
            <td>yy</td>
            <td>yyy</td>
      </tr>
</table>

7.表格跨行属性

使用rowspan可以是表格跨行

<table>
      <tr>
            <td rowspan="2">x</td>
            <td>xx</td>
            <td>xxx</td>
      </tr>
      <tr>
            <td>yy</td>
            <td>yyy</td>
      </tr>
</table>

8.表格嵌套

在一个表格中嵌入另外一个表格

<table border="1">
      <tr>
            <td>xx</td>
            <td>xxx</td>
      </tr>
      <tr>
            <td>
            	<table border="1">
            		<tr>
            			<td>a</td>
            			<td>s</td>
            		</tr>
            		<tr>
            			<td>d</td>
            			<td>f</td>
            		</tr>
            	</table>
            </td>
            <td>yyy</td>
      </tr>
</table>

注意：
1.完整表结构
2.放到<td>标签中

9.表格布局

使用表格可以做一个页面的整体布局

<table width="100%" bgcolor="#f2f2f2">
		<tr height="80px" bgcolor="#14191e"><td>111111</td></tr><!--页头-->
		<tr height="10px"><td></td></tr><!--上空行-->
		<tr><td>
				<table align="center" width="1024px" cellpadding="5px">
					<tr>
						<td width="240px"  valign="top">
							<table width="100%" bgcolor="#ffffff">
								<tr><td align="center" height="60">关于我们</td></tr>
								<tr><td align="center" height="60">团队介绍</td></tr>
								<tr><td align="center" height="60">人才招聘</td></tr>
								<tr><td align="center" height="60">讲师招募</td></tr>
								<tr><td align="center" height="60">联系我们</td></tr>
								<tr><td align="center" height="60">常见问题</td></tr>
								<tr><td align="center" height="60">意见反馈</td></tr>
								<tr><td align="center" height="60">友情链接</td></tr>

							</table>
						</td><!--左内容-->
						<td width="20px"></td><!--空隙-->
						<td width="764px" bgcolor="#ffffff" ><pre>
春江潮水连海平，海上明月共潮生。
滟滟随波千万里，何处春江无月明！
江流宛转绕芳甸，月照花林皆似霰；
...<!--右内容-->
					</tr>
				</table>
		</td></tr>
		<tr height="10px"><td></td></tr><!--下空行-->
		<tr height="150px" bgcolor="#14191e"><td>11111111</td></tr><!--页脚-->
	</table>

测试：在背景色为“orange”的行内嵌套一个1行3列的表格，水平居中显示，左侧内容宽度240px，中间橘色空列20px；右侧内容宽度764px

	<table align="center" width="100%" >
		<tr bgcolor="pink" height="80px"><td></td></tr>
		<tr height="10px"><td></td></tr>
		<tr >
			<td bgcolor="orange">
			<table cellspacing="0" align="center">
				<tr>
					<td height="10px" bgcolor="white" width="240px"></td>
					<td height="10px" bgcolor="orange" width="20px"></td>
					<td height="10px" bgcolor="white" width="764px"></td>
				</tr>
			</table>
		</td></tr>
		<tr height="=10px"><td></td></tr>
		<tr bgcolor="black" height="80px"><td></td></tr>
	</table>

页面布局总结：
1.尽量少的使用表格嵌套和跨行跨列，因为这会增加代码的整体维护成本。
2.使用表格进行网页结构布局，一般不设置border。

原文地址：https://www.cnblogs.com/csj2018/p/12856691.html