HTML5学习随记3⃣️_使表格第一行位于右上角html-CSDN博客

本文链接：https://blog.csdn.net/aston5128/article/details/54576105

1.超链接

1.URL

格式：

http://www.csdn.net/xxx/xxxx.html
http:// 这部分代表HTTP(超文本传输协议)协议
www.csdn.net 这部分代表主机名
xxx 代表文件夹名
xxxx.html 表示文件名

有两种类型的URL：
绝对URL用于访问非同一服务器上的资源
相对URL一般指访问同一台服务器上相同文件夹中的资源

<a href="http://www.xxx.com" target="_blank"><img src="xxx.jpg"></a>
点击图片xxx.jpg在空白页，链接到www.xxx.com

2.表格

<table>         这里是一个表格的开始标记
    <tr>        这里是一行的开始标记
    <td> </td>  这里是一列的开始标记以及结束标记
    <td> </td>
    </tr>       
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    <td> </td>
    </tr>   
</table>

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>表格</title>
</head>
<body>
<table>
    <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
    </tr>       
    <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
    </tr>
    <tr>
    <td>第三行第一列</td>
    <td>第三行第二列</td>
    </tr>   
</table>
</body>
</html>

结果为：
这里写图片描述

1.用colspan属性来扩展左右单元格

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>表格</title>
</head>
<body>
<table>
    <tr>
    <td colspan="2">这是一个合并的单元格</td>
    <td>第一行第三列</td>
    </tr>       
    <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
    <td>第二行第三列</td>
    </tr>
    <tr>
    <td>第三行第一列</td>
    <td>第三行第二列</td>
    <td>第三行第三列</td>
    </tr>   
</table>
</body>
</html>

结果为：

2.用rowspan属性来扩展上下单元格

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>表格</title>
</head>
<body>
<table>
    <tr>
    <td rowspan="2">这是一个合<br/>并的单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
    </tr>       
    <tr>
    <td>第二行第二列</td>
    <td>第二行第三列</td>
    </tr>
    <tr>
    <td>第三行第一列</td>
    <td>第三行第二列</td>
    <td>第三行第三列</td>
    </tr>   
</table>
</body>
</html>

结果为：
这里写图片描述

<!--同理也可以同时合并上下左右4个单元格-->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>表格</title>
</head>
<body>
<table>
    <tr>
    <td rowspan="2" colspan="2">这是一个合并的单元格1<br/>这是一个合并的单元格2</td>
    <td>第一行第三列</td>
    </tr>       
    <tr>
    <td>第二行第三列</td>
    </tr>
    <tr>
    <td>第三行第一列</td>
    <td>第三行第二列</td>
    <td>第三行第三列</td>
    </tr>   
</table>
</body>
</html>

结果为：
这里写图片描述

3.表头、主体、脚注

<thead> </thead> 表头
<tbody> </tbody> 主体
<tfoot> </tfoot> 脚注释

示例：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>表格</title>
</head>
<body>
<table>
    <!--caption标记必须紧随<table>标记之后-->
    <caption>成绩单</caption>
    <!--<caption>标记定义了表头-->
    <caption>姓名：xxx</caption>
    <thead>
        <tr>
            <!--<th>用于单元格字体加粗-->
            <th>学期</th><th>语文</th><th>数学</th><th>英语</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">总成绩：......</td>
        </tr>
    </tfoot>
    <!--脚注标记也得写成表格的形式-->
    <tbody>
        <tr>
            <td>1</td><td>96</td><td>87</td><td>79</td>
        </tr>
        <tr>
            <td>2</td><td>98</td><td>90</td><td>81</td>
        </tr>
    </tbody>
</table>
</body>
</html>