【复习】HTML常用标签<table>

文章目录

a 标签

href 属性:href即hyper(超级)-reference(链接/引用)的缩写,即为超链接的意思。该属性值为超链接地址名。该属性值的取值形式为:

"https://baidu.com"
"http://baidu.com"
 <a href="https://www.baidu.com" target="_blank" download>https://www.baidu.com</a>
 <a href="http://www.baidu.com" target="_self">http://www.baidu.com</a>

target 属性:该属性是指跳转方向的意思,即将在哪个窗口打开该链接地址。基本属性值有五类,分别为

“_self”:在当前页面打开超链接
“_blank”:在新的空白页面打开超链接
“_parent”:若有iframe包含的子窗口、孙窗口等,在当前窗口的上一层父窗口打开超链接
“_top”:若有iframe包含的子窗口、孙窗口等,在最外层窗口即祖宗窗口打开超链接。
“xxx”:会先检查有没有叫xxx名字的窗口,若没有则新建一个窗口命名为xxx,当后面再有一个值为xxx时便是该窗口打开。可用于设置利用同一个窗口打开覆盖多个页面。也可给iframe窗口的name命名为xxx,则打开的页面就是在iframe窗口打开了。
download下载超链接,不用

table 标签

工作最常用到的表格crud

<table>
 <thead>表头</thead>
 <tbody>主体</tbody>
 <tfoot>表尾</tfoot>
</table>

在这里插入图片描述

<style>
		table {  
            width: 100%;  
            border-collapse: collapse;  
        }  
        th, td {  
            border: 1px solid #ddd;  
            padding: 8px;  
        }  
        th {  
            background-color: #f2f2f2;  
            text-align: left;  
        }  
        tr:nth-child(even) {  
            background-color: #f9f9f9;  
        } 
</style>
<table summary="这是一个示例表格,包含了一些常见属性和标签。">  
        <caption>示例表格</caption>  
        <thead>  
            <tr>  
                <th scope="col">姓名</th>  
                <th scope="col">年龄</th>  
                <th scope="col">城市</th>  
                <th scope="col">操作</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td>张三</td>  
                <td>25</td>  
                <td>北京</td>  
                <td><button onclick="alert('点击了张三')">详情</button></td>  
            </tr>  
            <tr>  
                <td>李四</td>  
                <td>30</td>  
                <td>上海</td>  
                <td><button onclick="alert('点击了李四')">详情</button></td>  
            </tr>  
            <tr>  
                <td>王五</td>  
                <td>28</td>  
                <td>广州</td>  
                <td><button onclick="alert('点击了王五')">详情</button></td>  
            </tr>  
        </tbody>  
        <tfoot>  
            <tr>  
                <td colspan="3">总计</td>  
                <td>3人</td>  
            </tr>  
        </tfoot>  
    </table>  

通过这个范例了解html <table>标签的常见属性及子标签

<table> 表格的根元素。
<thead> 表头,一行或多行

  • <tr>表格行
  • <th>表头,默认居中加粗

<tbody> 表格主体,数据行

  • <tr> 数据行
  • <td> 表格数据单元格

<tfoot>:页脚

  • colspan="3" 合并三列
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值