【HTML笔记】_表格基础one

为了写页面硬着头皮上HTML,一切从0开始,但愿我能OK!

html5.jpg

【表格构成】
<table></table> 表格
<thead></thead> 表格的头部
<tbody></tbody> 表格的身体
<tfoot></tfoot> 表格的尾部
<tr></tr> 表格的行
<th></th> 表格的标题
<td></td> 表格的单元格

【表格的四层嵌套】
table
......thead
............tr
..................th
......tbody
............tr
..................td
......tfoot

【表格的特性】
1.table标签特性:
(1).单元格平分整个table的宽度
(2).th内容默认加粗,且水平垂直居中
(3).td内容不加粗,只垂直居中
(4).table的宽度决定整个表格宽度,如果td,th设置总宽度比总宽度大,不起作用
(5).表格的同一列继承最大的宽度(解决方法:th,td最好都设置宽度)
(6).表格的同一行继承最大的宽度(解决方法:th,td最好都设置高度)

2.单元格的合并
(1).colspan="数值" 行合并
(2).rowspan="数值" 列合并
数值代表要合并的单元格数量,被合并的单元格需要注释掉

【样例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格基础</title>
    <style>
        table{
            border: 1px solid red;
            /*合并边框*/
            border-collapse:collapse;
        }
        th,td{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th colspan="2">周一二</th>
                <!-- <th>周二</th> -->
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td rowspan="2">体育</td>
                <td>政治</td> 
            </tr>
            <tr>
                <td>美术</td>
                <td>化学</td>
                <td>英语</td>
                <!-- <td>数学</td> -->
                <td>政治</td> 
            </tr>           
        </tbody>
    </table>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容