表格属性详细解析和报表

涛哥

2021-12-13

HTML

本文最后更新于2022.04.08-14:41，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

表格属性

1，colspan

colspan属性表示跨越多少列
改行其他元素的内容省略不写

2，rowspan

rowspan属性表示跨越多少行
改列其他元素的内容省略不写

width:auto;根据元素自身的宽度变化

height:auto;根据元素自身的高度变化

报表

表头<th> 表格标题<caption> 页眉<thead> 数据主体<tbody> 页脚<tfoot>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	   <style type="text/css">
        thead {
            color: aqua;
        }
        
        tbody {
            color: brown;
        }
        
        tfoot {
            color: cornflowerblue;
        }
    </style>
</head>
<body> 
   <table border="1" cellpadding="0" cellspacing="0">
        <caption>书籍统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>书籍</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>本草纲目</td>
                <td>李时珍</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

如何实现图文布局步骤：

1. 确定列数
2. 写出行列表格
3. 确定跨行跨列的单元格
4. 增加rowspan和colspan属性删除多余单元格

阅读剩余

版权声明：
作者：涛哥
链接：https://ltbk.net/front/html/article/346.html
文章版权归作者所有，未经允许请勿转载。

THE END

HTML中注释，特殊符号和书写规范

<<上一篇

主动加女生微信，难道是为了帮你pdd砍一刀吗？

下一篇>>