学习笔记-html5-表格元素

最新推荐文章于 2021-11-18 19:53:17 发布

冬瓜312

最新推荐文章于 2021-11-18 19:53:17 发布

阅读量375

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/tjzhuorui/article/details/75026181

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

四段代码分别完成了以下功能

1.使用了表格的基本标签

注意thead，tbody,tfoot存在的意义,以及tfoot里面的使用方法

2.设置某行的背景的颜色

3.设置某列的背景颜色，方法一

注意占位，以及span的使用方法

4.设置某列的背景颜色，方法二

代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5-表格</title>
</head>
<body>
<h1>1.表格中的基本属性</h1>
<p>包含有caption,thead,tbody,tfoot</p>
<p>其中,thead内使用th;tbody和tfoot使用tr和td</p>
<table border="1">
    <caption>张三的成绩表</caption>
    <thead>
    <th>学科</th>
    <th>成绩</th>
    <th>排名</th>
    </thead>
    <tbody>
    <tr>
        <td>语文</td>
        <td>99</td>
        <td>1</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>1</td>
    </tr>
    <tr>
        <td>外语</td>
        <td>6</td>
        <td>33</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3"> 总分：205 总排名：22</td>
    </tr>
    </tfoot>
</table>
<br>
<h1>2.将表格中的某行的背景色设置为红色</h1>
<table border="1">
    <caption>张三的成绩表</caption>
    <thead>
    <th>学科</th>
    <th>成绩</th>
    <th>排名</th>
    </thead>
    <tbody>
    <tr style="background-color: red">
        <td>语文</td>
        <td>99</td>
        <td>1</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>1</td>
    </tr>
    <tr>
        <td>外语</td>
        <td>6</td>
        <td>33</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3"> 总分：205 总排名：22</td>
    </tr>
    </tfoot>
</table>
<br>
<h1>3.1.将表格中的某列的背景色设置为红色－方法一</h1>
<table border="1">
    <colgroup span="1"><!--占位符，如果没有这一行-->
    <colgroup style="background-color: red" span="1">
    <caption>张三的成绩表</caption>
    <thead>
    <th>学科</th>
    <th>成绩</th>
    <th>排名</th>
    </thead>
    <tbody>
    <tr>
        <td>语文</td>
        <td>99</td>
        <td>1</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>1</td>
    </tr>
    <tr>
        <td>外语</td>
        <td>6</td>
        <td>33</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3"> 总分：205 总排名：22</td>
    </tr>
    </tfoot>
</table>
<br>
<h1>3.2.将表格中的某列的背景色设置为红色－方法二</h1>
<table border="1">
    <colgroup>
        <col span="1">
        <col style="background-color: red" span="1">
    </colgroup>
    <caption>张三的成绩表</caption>
    <thead>
    <th>学科</th>
    <th>成绩</th>
    <th>排名</th>
    </thead>
    <tbody>
    <tr>
        <td>语文</td>
        <td>99</td>
        <td>1</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
        <td>1</td>
    </tr>
    <tr>
        <td>外语</td>
        <td>6</td>
        <td>33</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3"> 总分：205 总排名：22</td>
    </tr>
    </tfoot>
</table>
<br>


</body>
</html>

效果图: