表格属性详细解析和报表

本文最后更新于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属性删除多余单元格
阅读剩余
THE END