前端 HTML body标签相关内容常用标签表格标签 table

表格标签 table

表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。td标签，数据单元格可以包含放文本<span>标签、图片<img/>标签、列表<ul>、段落<p>、表单<form>、水平线<hr>、表格<table>等等

<table>标签是块级标签

表格简单写法：

<tr>表示一行

<td> 表示一列

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table>

        <tr>

            <td>第一行,第1列</td>

            <td>第一行,第2列</td>

            <td>第一行,第3列</td>

        </tr>

        <tr>

            <td>第二行,第1列</td>

            <td>第二行,第2列</td>

            <td>第二行,第3列</td>

        </tr>

    </table>

</body>

</html>

border

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1">

        <tr>

            <td>第一行,第1列</td>

            <td>第一行,第2列</td>

            <td>第一行,第3列</td>

        </tr>

        <tr>

            <td>第二行,第1列</td>

            <td>第二行,第2列</td>

            <td>第二行,第3列</td>

        </tr>

    </table>

</body>

</html>

在table里面 td标签里嵌套a标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="1">

        <tr>

            <td>主机名</td>

            <td>端口</td>

            <td>操作</td>

        </tr>

        <tr>

            <td>1.1.1.1</td>

            <td>80</td>

            <td>

                <a href="http://www.baidu.com">查看详细</a>

                <a href="http://www.python.org">修改</a>

            </td>

        </tr>

         <tr>

            <td>2.2.2.2</td>

            <td>22</td>

            <td>第二行,第3列</td>

        </tr>

         <tr>

            <td>3.3.3.3</td>

            <td>56</td>

            <td>第二行,第3列</td>

        </tr>

    </table>

</body>

</html>

规范写法表格标签：

<tr>表示一行

<td> 表示一列

在<thead>标签里面想显示内容使用<th></th>，显示表格头里的单元格

在<tbody>标签里面想显示内容使用<td></td>,显示表格主体每个单元格信息

<!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">

    <title>Title</title>

</head>

<body>

    <!-- 表格-->

    <table>

        <!-- 表格头 -->

        <thead>

            <tr>

                <!-- th 表格头里的单元格 -->

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!-- 表格主体 -->

        <tbody>

            <!-- 表格主体每一行-->

            <tr>

                <!-- td 表格主体每个单元格信息 -->

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

给table表格加上属性 border 边框 border="1"

<!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">

    <title>Title</title>

</head>

<body>

    <!-- 表格-->

    <table border="1">

        <!-- 表格头 -->

        <thead>

            <tr>

                <!-- th 表格头里的单元格 -->

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!-- 表格主体 -->

        <tbody>

            <!-- 表格主体每一行-->

            <tr>

                <!-- td 表格主体每个单元格信息 -->

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

给table表格加上属性 cellspacing

cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0

加上cellspacing="0"

<!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">

    <title>Title</title>

</head>

<body>

    <!-- 表格-->

    <table border="1" cellspacing="0">

        <!-- 表格头 -->

        <thead>

            <tr>

                <!-- th 表格头里的单元格 -->

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!-- 表格主体 -->

        <tbody>

            <!-- 表格主体每一行-->

            <tr>

                <!-- td 表格主体每个单元格信息 -->

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

表格行和列的合并合并属性

rowspan 合并行(竖着合并)

colspan 合并列(横着合并)

锁定要合并的位置

<!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">

    <title>Title</title>

</head>

<body>

    <!-- 表格-->

    <table border="1" cellspacing="0">

        <!-- 表格头 -->

        <thead>

            <tr>

                <!-- th 表格头里的单元格 -->

                <th></th>

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!-- 表格主体 -->

        <tbody>

            <!-- 表格主体每一行-->

            <tr>

                <!-- td 表格主体每个单元格信息 -->

                <td rowspan="3">上午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td rowspan="2">下午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

横着合并 colspan属性

<!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">

    <title>Title</title>

</head>

<body>

    <!-- 表格-->

    <table border="1" cellspacing="0">

        <!-- 表格头 -->

        <thead>

            <tr>

                <!-- th 表格头里的单元格 -->

                <th></th>

                <th>星期一</th>

                <th>星期二</th>

                <th>星期三</th>

                <th>星期四</th>

                <th>星期五</th>

            </tr>

        </thead>

        <!-- 表格主体 -->

        <tbody>

            <!-- 表格主体每一行-->

            <tr>

                <!-- td 表格主体每个单元格信息 -->

                <td rowspan="3">上午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td rowspan="2">下午</td>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

            <tr>

                <td>语文</td>

                <td>数学</td>

                <td>英语</td>

                <td>生物</td>

                <td>化学</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="6">课程表</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

前端 HTML body标签相关内容常用标签表格标签 table的更多相关文章

前端 HTML body标签相关内容常用标签表单标签 form
表单标签 form 表单是一个包含表单元素的区域表单元素是允许用户在表单中输入内容,比如:文本域(textarea).输入框(input).单选框() 表单的作用 form标签作用是把用户输入数据信息 ...
前端 HTML body标签相关内容常用标签表单标签 form 表单控件分类
表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性标签上显示内容 input标签 ...
前端 HTML body标签相关内容常用标签超链接标签 a标签
超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...
前端 HTML body标签相关内容常用标签段落标签 p标签
段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式是否又独占一行呢? 答案是的块级元 ...
前端 HTML body标签相关内容常用标签标题标签 h1-h6
标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...
前端 HTML body标签相关内容常用标签列表标签 ul，ol,li
列表标签 ul,ol,li ul.ol.li标签都属于块级标签,独占一行网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...
前端 HTML body标签相关内容常用标签图片标签 <img/>
图片标签 <img/> 一个网页除了有文字,还会有图片.我们使用<img/>标签在网页中插入图片. <img/> 是单闭合标签语法:<img src=&qu ...
前端 HTML body标签相关内容常用标签表单标签 form里面的 input标签介绍
input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...
前端 HTML body标签相关内容常用标签表单标签 form里面的 label标签介绍
定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

随机推荐

Java并发之volatile二
使用volatilekeyword的场景 Volatile 变量具有 synchronized 的可见性特性.可是不具备原子特性.这就是说线程可以自己主动发现 volatile 变量的最新值.Vola ...
[UFLDL] ConvNet
二十三(Convolution和Pooling练习) 三十八(Stacked CNN简单介绍) 三十六(关于构建深度卷积SAE网络的一点困惑) 五十(Deconvolution Network简单理 ...
MySql安全模式的关闭和开启
#MySql关闭安全模式 ; commit; #MySql开启安全模式 ; commit;
解决 Spring Oauth2 RedisTokenStore storeAccessToken 报错 java.lang.NoSuchMethodError: org.springframework.data.redis.connection.RedisConnection.set
原因是Spring 版本兼容问题参考: https://blog.csdn.net/smollsnail/article/details/78954225 继承 RedisTokenStore 修改 ...
使用Java提供的MXBean来监控jvm创建了哪些线程
MBean是一种JavaBean,MBean往往代表的是JMX中的一种可以被管理的资源.MBean会通过接口定义,给出这些资源的一些特定操作: 属性的读和写操作可以被执行的操作关于自己的描述信息 ...
B - Calculation 2
Given a positive integer N, your task is to calculate the sum of the positive integers less than N w ...
别致的语言GO（GO语言初涉）
最近由于各种原因(好吧,其实是犯懒)已经许久没有再写新的博文了!最近正好在学习一门新的语言,所以正好记录一下自己的学习成果!最近利用每天晚上下班回来后的几小时,学习了Google开发的Go语言,算是对 ...
FastJson 自定义Serialize、Parser
FastJson 自定义Serialize.Parser 今天在处理Json反序列化时,在C#传过来的JSON字符串中枚举类型为int类型,FastJson对于枚举的处理有两种类型,一种是字符串一种是 ...
python数据类型之字典（二）
字典的基本操作键值查找: >>> aInfo = {'Wangdachui':3000,'Niuyun':2000,'Linling':4500,'Tianqi':8000} &g ...
SQL中的Continue和Break
x 在Sql Server中,sql语句包含While循环的时候,肯定都或多或少的用到Continue和Break... 下面撸了一个小Demo , Begin ),@Index) Begin Pri ...

前端 HTML body标签相关内容 常用标签 表格标签 table

表格标签 table

前端 HTML body标签相关内容 常用标签 表格标签 table的更多相关文章

随机推荐

热门专题

前端 HTML body标签相关内容常用标签表格标签 table

前端 HTML body标签相关内容常用标签表格标签 table的更多相关文章