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

文章目录

  • [a 标签](#a 标签)
  • [table 标签](#table 标签)

a 标签

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

txt 复制代码
"https://baidu.com"
"http://baidu.com"
html 复制代码
 <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

html 复制代码
<table>
 <thead>表头</thead>
 <tbody>主体</tbody>
 <tfoot>表尾</tfoot>
</table>
html 复制代码
<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" 合并三列
相关推荐
花生侠17 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯24 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调31 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined233 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor