精华内容
下载资源
问答
  • 隐藏与显示tr标签的方法有很多,本文使用jquery来实现,需要的朋友可以参考下
  • html表格标签——表格的基本结构表格的结构表格的基本标签表格标签的基本属性table标签的基本属性tr标签的基本属性th和td标签的基本属性 表格的结构 在基本表格结构中,表格标题、项目表头和数据资料构成了表格基本...

    表格的结构

    在基本表格结构中,表格标题项目表头数据资料构成了表格基本结构三个要素。
    例如下图所示的表格中,表格标题为“通讯录”,表格第一行单元格中的内容基本不变,称作项目表头,表格第二行后单元格的内容通常会动态改变,称作数据资料。
    基本表格
    通讯录
    源代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>通讯录</title>
    </head>
    
    <body>
    	<table border="2">
    		<caption align="center">通讯录</caption>
    		<tr>
    			<th>姓名</th>
    			<th>QQ</th>
    			<th>联系电话</th>
    	    </tr>
    		<tr>
    			<td>张三</td>
    			<td>123456789</td>
    		    <td>123456789</td>
    	    </tr>
    	</table>
    </body>
    </html>
    

    表格的基本标签

    HTML表格由table标签以及一个或多个tr、th或td标签组成:

    • table标签:定义一个表格
    • caption标签:定义表格标题,嵌套在<table></table>
    • tr标签:定义表格中的一行,嵌套在<table></table>
    • th标签:定义表格中的表头单元格,嵌套在<tr></tr>
    • td标签:定义表格中的数据单元格,嵌套在<tr></tr>

    表格标签的基本属性

    table标签的基本属性

    table标签的基本属性如下图所示:

    属性名 含义 常用属性值
    border 设置表格的边框(默认border=“0”) 像素值
    cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2像素)
    cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值(默认为1像素)
    width 设置表格的宽度 像素值
    height 设置表格的宽度 像素值
    align 设置表格在网页中的水平对齐方式 left、center、right
    bgcolor 设置表格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
    background 设置表格的背景图像 url地址

    在这里插入图片描述

    tr标签的基本属性

    tr标签的基本属性如下图所示:

    属性名 含义 常用属性值
    height 设置行高度 像素值
    align 设置一行内容的水平对齐方式 left、center、right
    valign 设置一行内容的垂直对齐方式 top、middle、bottom
    bgcolor 设置行背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
    background 设置行背景图像 url地址

    th和td标签的基本属性

    th和td标签的基本属性如下图所示:

    属性名 含义 常用属性值
    width 设置单元格的宽度 像素值
    height 设置单元格的高度 像素值
    align 设置单元格内容的水平对齐方式 left、center、right
    valign 设置单元格内容的垂直对齐方式 top、middle、bottom
    bgcolor 设置单元格的背景颜色 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
    background 设置单元格的背景图像 url地址

    表格高级样式设置相关概念

    外边框线样式属性frame

    表格的外边框线的样式可用属性frame的取值来确定,frame取值与相应的样式如下:

    • above:显示上边框
    • below:显示下边框
    • hsides:显示上下边框
    • vsides:显示左右边框
    • lhs:显示左边框
    • rhs:显示右边框
    • border:显示上下左右边框
    • void:不显示边框

    内部边框样式属性rules

    表格的内部边框的样式可用属性rules的取值来确定,rules取值与相应的样式如下:

    • all:显示所有内部边框
    • none:不显示内部边框
    • rows:仅显示行边框
    • cols:仅显示列边框
    • groups:显示介于行组和列组间边框

    单元格合并

    在制作稍复杂的表格时,需要对表格中的行或列进行合并。

    水平方向单元格的合并

    需要将水平方向的单元格合并时,可在或标记中添加colspan属性,属性的取值即为合并的单元格数目。

    垂直方向单元格的合并

    需要将垂直方向的单元格合并时,可在或标记中添加rowspan属性,属性的取值即为合并的单元格数目。

    相关概念选择题及参考答案

    选择题

    1、定义表格的项目表头的HTML标签是( )。

    A、
    <table>

    B、
    <tr>

    C、
    <td>

    D、
    <th>

    2、下列选项中,用于设置表格背景颜色的属性是( )。

    A、
    background

    B、
    bgcolor

    C、
    bordercolor

    D、
    backgroundcolor

    3、要使表格的行高为18px,以下方法中,正确的是( )

    A、
    <table height="18px">...</table>

    B、
    <th height="18px">...</th>

    C、
    <tr height="18px">...</tr>

    D、
    <td height="18px">...</td>

    4、下列选项中,用于设置表格标题的标签是( )

    A、
    <title>...</title>

    B、
    <h1>...</h1>

    C、
    <tags>...</tags>

    D、
    <caption>...</caption>

    5、下列设置单元格中文本对齐方式的选项中,正确的是( )

    A、
    <th align="center" valign="center">...</th>

    B、
    <th align="center" valign="middle">...</th>

    C、
    <th align="middle" valign="center">...</th>

    D、
    <th align="middle" valign="middle">...</th>

    6、下列选项中,用于设置表格内部边框线显示的属性是( )。

    A、
    border

    B、
    frame

    C、
    rules

    D、
    innerborder

    7、如果希望表格的外部边框只显示上下两条边框线,属性frame的取值应选( )。

    A、
    hsides

    B、
    vsides

    C、
    lhs

    D、
    rhs

    8、如果希望表格的内部边框只显示行线,则属性rules的取值应选( )。

    A、
    line

    B、
    rows

    C、
    cols

    D、
    groups

    9、HTML中,若合并两个水平方向单元格,应使用的属性是( )。

    A、
    colspan

    B、
    nospan

    C、
    rowspan

    D、
    colwrap

    10、<table rules=cols>,表示( )

    A、
    显示所有分隔线

    B、
    只显示组(Groups)与组之间的分隔线

    C、
    只显示行与行之间的分隔线

    D、
    只显示列与列之间的分隔线

    参考答案

    1、D
    2、B
    3、C
    4、D
    5、B
    6、C
    7、A
    8、B
    9、A
    10、D

    展开全文
  • tr标签和td标签 一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格(一行中的一个元素) width hight是css样式 控制表的高和宽 borger标签 语法:border="1"可用来给表加边框 ""中的...

    table标签
    table标签是表格标签 用这个可以创建一个表格
    在标签中可以设置表格的相关属性
    tr标签和td标签
    一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格(一行中的一个元素)
    width hight是css样式 控制表的高和宽
    borger标签
    语法:border="1"可用来给表加边框 ""中的数字代表最外层边框的宽 数字越大越宽
    cellspacing标签
    语法:cellspacing="0"用来设置单元格间距 ""中的数字越大越宽 间距为0并不意味着重合 而是两个紧挨着
    cellpadding
    语法:cellpadding="1"用来设置单元边沿与其内容之间的空白 ""中的数字越大越宽 间距为0并不意味着重合 而是两个紧挨着

    <body>
    		<table align="center" border="1" width="300" hight="300" cellspacing="0">
    			<!--
                	table标签是表格标签 用这个可以创建一个表格
                	width hight是css样式 控制表的高和宽
                	borger可用来给表加边框 ""中的数字代表最外层边框的宽 数字越大越宽
                	cellspacing用来设置单元格间距 数字越大越宽 间距为0并不意味着重合 而是两个紧挨着
    			-->
    			<tr>
    				<td align="center"><b>1+1</b></td>
    				<!--
    					align="center"用来设置单元格中元素对齐方式 
    					此处center表示居中 也可用于表格对齐方式
    					<b></b>标签用来文体加粗
    					这两个效果可用一个<th>"文本"</th>标签来表示
    					如下
    				-->
    				<th>1+2</th>
    				<td>1+3</td>
    			</tr>
    			<!--
                	一个<tr></tr>标签代表一行 一个<td>代表一个单元格(一行中的一个元素)
                -->
                <tr>
    				<td>2+1</td>
    				<td>2+2</td>
    				<td>2+3</td>
    			</tr>
    		</table>
    	</body>
    

    caption表格标题标签
    <caption>标题内容</caption>需要写在table表格里面里面,不然没用。

    align元素
    align用来设置单元格中元素对齐方式 语法:align=""
    align="center"表示居中 也可用于表格对齐方式
    b标签和th标签
    <b></b>标签用来文体加粗
    这两个效果可用一个<th>"文本"</th>标签来表示

    在这里插入图片描述

    <td align="center"><b>1+1</b></td>
    

    这个是左边的1+1
    同时上面的图片是cellspacing="0"即单元格间距为0
    下面的图片是cellspacing="5"即单元格间距为5

    <th>1+2</th>
    

    这个是中间的那个1+2
    同样的效果不同的标签

    展开全文
  • 修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ margin-left: 2px; } 这个设置其实,会没有效果的,...

    修改tr标签的行距,tbale标签的td标签间距

    1. 看如下Css文件的代码,其都没有table的tr行距产生效果
    tr{
        margin-top: 10px;
        padding: 10px;
    }
    td{
        margin-left: 2px;
    }
    

    这个设置其实,会没有效果的,原因就是对于table来说,它有一个属性值会设置是否当成一个整体来看,且其有设置table元素间距行距的属性。

    1. border-collapse 属性设置表格的边框是否被合并为一个单一的边框
    属性值 作用描述
    separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse 如果设置的话,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
    inherit 从父元素继承 border-collapse 属性的值,大多数为collapse
    1. border-collapse属性加上border-spacing属性就可以设置tr标签行间距,和td标签的间距
    <table style="border-collapse:separate; border-spacing:0px 10px;">
    	<tr>
    		<td>不等风雨,只等你</td>
    		<td>汝,知否?</td>
    	</tr>
    	<tr>
    		<td>春风十里不如你</td>
    		<td>汝,知否?</td>
    	</tr>
    	<tr>
    		<td>漂洋过海来看你</td>
    		<td>汝,知否?</td>
    	</tr>
    </table>
    

    border-spacing:2px 5px;第一个参数代表td的间距,第二个参数代表tr的行距。

    展开全文
  • 使用JavaScript根据后台获取的数据进行创建table标签下的tr标签 前端页面中的标签部分代码 <table class="layui-table lay-even" id="poweruser"> <thead> <tr> <th width="80">ID&...

    使用JavaScript根据后台获取的数据进行创建table标签下的tr标签

    前端页面中的标签部分代码

     <table class="layui-table lay-even" id="poweruser">
            <thead>
            <tr>
                <th width="80">ID</th>
                <th>名称</th>
                <th width="180">图标</th>
                <th>状态</th>
                <th>排序</th>
                <th width="240">操作</th>
            </tr>
            </thead>
            <tbody>
            <!--这是根据后台的数据在js中进行创建tr标签-->
            </tbody>
     </table>
    

    使用根据获取的数据进行遍历创建tr标签

    $.ajax({
    			type : "post",
    			async : false,//不加直接error
    			url : '/SuperCMS/AdminMenuCon/menupower',
    			success : function(res) {
    				data=res;
    				var tdArr = document.getElementById('poweruser').firstElementChild;
    		        for (var i = 0; i < data.length; i++) {
    		            var tr = document.createElement("tr");		            
    		            tr.innerHTML = '<td>' + data[i].id + '</td>'
    		                           +'<td>' + data[i].cname + '</td>'
    		                           +'<td><i class="iconfont">' + data[i].iconfont + '</i></td>'
    		                           +'<td><input type="checkbox" name="field_value" value="1" lay-skin="switch" lay-filter="ajax" lay-text="正常|禁用"  data-params /></td>'
    		                           +'<td>'+ data[i].sort + '</td>'
    		                           +'<td><a href="" class="layui-btn layui-btn-mini modal-catch">'
    		                           +'<i class="iconfont">&#xe653;</i>编辑</a>'
    		                           +'<a class="layui-btn layui-btn-mini layui-btn-danger ajax" data-list="" data-params="">'
    		                           +'<i class="iconfont">&#xe626;</i>删除</a>'            
    		                           +'</td>';		            
    		            tdArr.appendChild(tr);           
    		        }
    			},
        	    error: function () {
                 console.log("超级权限菜单!");
                }
    		});
    

    具体效果

     

    来源:https://blog.csdn.net/concealed0/article/details/94360472

     

     

    jQuery表格生成插件Table.js:

    http://www.jq22.com/jquery-info10649

    js如何动态创建表格(两种方法)

    https://www.cnblogs.com/Renyi-Fan/p/9134967.html#_label1

     

    展开全文
  • 正则表达式匹配指定的tr标签

    千次阅读 2019-05-13 08:52:16
    ,在这个tr标签中存在一个特殊的字符串“[$]”,要在多个tr标签中匹配出所有符合条件的<tr>。 样例输入 var str="<tr>123456</tr><tr>ABCD[$]12345678</tr><tr>3456789</t...
  • 主要介绍了使用delegate方法为一个tr标签加一个链接,并规定当这些事件发生时运行的函数,需要的朋友可以参考下
  • html tr标签替换

    千次阅读 2016-01-26 11:38:40
    在table中读取不固定图片或者文本时会出现不好排的情况 ...这样就可以在一个原有的tr下生成多个tr标签。 $.get("../aaaa?action=getMoneyCost&orderid=" + getQueryString("orderid"), function (data) {
  • 要求从后台查询该省份的所有城市,然后动态的再前台固定的tr标签中添加相应的td标签来展示城市基本信息; 一、前台jsp及js源码 二、后台action 一、前台jsp及js源码 jsp:在固定的tr标签...
  • 使用JavaScript根据后台获取的数据进行创建table标签下的tr标签 前端页面中的标签部分代码 <table class="layui-table lay-even" id="poweruser"> <thead> <tr> <th width="80">ID&...
  • 简介 ... ... 表头单元格-包含头部信息(由th元素创建) 标准单元格-包含数据(有td元素创建) ...tr标签定义HTML表格的行,一个tr元素包含一个或多个th和td元素。 属性 字段 含义 rowspan ...
  • table标签用于定义一个表格,在网页当中加入一个table标签就相当于定义了一个表格。td和tr标签是table的子标签,分别用于定义行和列<!DOCTYPE html> <title></title> <meta charset="UTF-8"></meter> <tr>
  • 开发项目遇到的一个需求: 有个 table 表单,其中有一行的要填的数据不确定,可能是很多. 提交的时候为了方便处理数据, 后台要求拼成以逗号 ...动态生成tr标签</title> </head> <body> <tabl
  • 山西白亮博客-tr标签在table里动态添加删除自定义目录标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tr标签动态添加删除</title> </head...
  • table中移动tr标签后时间重排 操作效果 主要思路 *获取所有 tr 标签对开始时间和节目时长的值进行获取 *循环对每个 tr 标签进行时间计算 /** * 时间重排测试 */ function timeAuto(obj) { var objs = obj....
  • tr标签单独添加border

    2019-10-21 11:50:38
    直接定义table tr{ border-bottom: 1px solid #e5e5e5;...必须在tr外层的table标签添加border-collapse: collapse;属性 table{ border-collapse: collapse; } table tr{ border-bottom: 1px solid #e5e5e5;...
  • Jquery和JS获取Table中tr标签的值以及赋值 业务场景:根据 类型,给比例赋值,是当前td比例动态变化;废话少说,直接上代码 1、以下是HTML代码; <div class="col-xs-12 noTableTdBorder"> <table id=...
  • Html中TR标签的隐藏与显示

    万次阅读 2012-11-25 10:09:52
    TR标签的隐藏与显示:block(显示)和none(隐藏)  eg:  <tr id="sample" style="display: blocknone"> sample function changeTR(selectedValue) { var tr1 = document.getElementById...
  • 这个功能看起来很简单,但是其中却...但是,这样其实是取不到tr标签的,因为,我们的浏览器在构造table的时候,会默认把这些tr标签放在table的tbody标签中,因此,这样只能取到tbody标签。 要想取得tr标签,要先取到t
  • 删除tr有两种方法 动态拼接tr的部分代码 $.each(data,function (i,n) { str+="<tr id=\"tr_"+n.id+"\">"; str+="<td><input type=\"checkbox\" value=\""+n.id+"\"/></td>"; ...
  • v-for在表格标签的tr标签里不能用

    千次阅读 2020-01-16 15:24:14
    v-for不能在以下标签里使用 <thead> <tbody> <tfoot> <th> <td> 表格标签只有<tr>里可以,但是只有<tr>或者套前在以上标签里,是不能成功的 在表格标签一般都是嵌套在<...
  • tr标签 课程表

    2016-09-20 13:00:46
    tr align = "center" > < td > 项目 td > < td colspan = "5" > 上课 td > < td colspan = "2" > 休息 td > tr > < tr align = "center" > < td > 星期 td > < td > 星期一 td > < ...
  • H5 table tr标签和td标签的区别

    万次阅读 2017-07-17 15:18:32
    标签定义 HTML 表格中的行。 一个 元素包含一个或多个 或 元素。 标签定义 HTML 表格中的标准单元格。 HTML 表格有两种单元格类型: 表头单元格 - 包含头部信息(由 元素创建) 标准单元格 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,412
精华内容 2,564
关键字:

tr标签