html表格的操作

最新推荐文章于 2024-08-21 10:15:37 发布

weixin_47204963

最新推荐文章于 2024-08-21 10:15:37 发布

阅读量229

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_47204963/article/details/107722034

版权

笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

标题表格的主要内容

表格的应用场景
表格的基本结构
如何操作表格
表格属性
表格跨行跨列
表格嵌套
：表格里的单元格里面还有表格
表格网页布局
：表格网页布局的原理主要是将导航栏还有空白，主体，尾部等看成表格的一行一行，同时配合表格嵌套；表格布局时，不设置border边框
attention!!!表格布局与表格嵌套尽量减少使用

表格应用场景主要有后台管理的界面和订单界面

表格的基本结构

table 表格
tr行
td单元格
th表格头，内容居中，加粗对齐（类似于：年份，城市等）
caption 带标题的表格(注意区分表格头)
带结构的表格（thead表头、tbody主体、tfoot脚注,书写的位置不影响实际的位置）

<table>
	<caption>表格标题居中显示</caption>
	<thead>
	<tr>
		<th></th>
		<th></th>
	</tr>
	</thead>
	<tbody>
	<tr> 
		<td></td>
		<td></td> 
	</tr>
	</tbody>
	<tfoot>
	<tr> 
		<td></td>
	 	<td></td> 
	</tr>
	</tfoot>
</table>

一个案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px">
         <caption>前端工程师平均工资</caption>
         <thead>
            <tr>
                <th rowspan="2">城市</th>
                <th colspan="2">2014年</th>  
                <th rowspan="2">2015年</th>
                <th rowspan="2">2016年</th>
            </tr>
            <tr>               
                <th>上半年</th>
                <th>下半年</th>
            </tr>
         </thead>
         <tbody>
            <tr>
                <td>北京</td>
                <td>8000</td>
                <td>9000</td>
                <td>10000</td>
                <td>12000</td>
            </tr>
            <tr>
                <td>上海</td>
                <td>6000</td>
                <td>7000</td>
                <td>8000</td>
                <td>10000</td>
            </tr>
         </tbody>
         <tfoot>
             <tr>
                <td>合计</td>
                <td>7000</td>
                <td>8000</td>
                <td>9000</td>
                <td>110000</td>
             </tr>
         </tfoot>
    </table>
</body>
</html>

attention！！！表格默认是没有边框的，边框需要使用border属性进行设置，注意区分cellpadding与cellspacing的区别
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
表格的嵌套举例——注意的地方，嵌套表格时，在单元格的子表格也是同样的表格结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>2014年</td>
            <td>2015年</td>
            <td>2016年</td>
        </tr>
        <tr>
            <td>
                <table>
                <tr><td>上半年</td> <td>下半年</td></td></tr>
                <tr><td>8000</td><td>9000</td></tr>
                 </table>
            </td>
            <td>10000</td>
            <td>12000</td>
        </tr>
    </table>
</body>
</html>