表格标签基础

10个月前 (07-23) 644次浏览 已收录 0个评论
<table>
    <tr>
        <th>表头</th>
        <td>单元格内的文字</td>
    </tr>
</table>
  • <table></table>是定义表格的标签
  • <tr></tr>是定义表格中的行,必须嵌套在<table></table>标签中
  • <td></td>是定义表格中的单元格,必须嵌套在<tr></tr>标签中
  • <th></th>表头标签,位于表格第一行或者第一列,表头单元格里面的文本内容加粗居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="230">
            <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
            <tr><td>渣渣龙</td><td>男</td><td>22</td></tr>
            <tr><td>王学龙</td><td>男</td><td>21</td></tr>
    </table>
</body>
</html>
结果演示

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="img/down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td>
                <a href="https://www.baidu.com" target="_blank">百度</a>
                <a href="https://www.sougou.com" target="_blank">搜狗</a>
            </td>
        </tr>
    </table>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:表格标签基础
喜欢 (1)

您必须 登录 才能发表评论!