html 怎么让tr的css覆盖td的_html表格标签

最新推荐文章于 2021-03-21 10:33:12 发布
最新推荐文章于 2021-03-21 10:33:12 发布
阅读量143 收藏
点赞数
文章标签： html 怎么让tr的css覆盖td的 html 表格 html表格

HTML表格标签

表格是一种组织整理数据的手段，在HTML当中表格使用<table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<body>
    <table>
        <tr>
            <td>第1行-第1列</td>
            <td>第1行-第2列</td>
            <td>第1行-第3列</td>
        </tr>
        <tr>
            <td>第2行-第1列</td>
            <td>第2行-第2列</td>
            <td>第2行-第3列</td>
        </tr>
        <tr>
            <td>第3行-第1列</td>
            <td>第3行-第2列</td>
            <td>第3行-第3列</td>
        </tr>
    </table>
</body>

1. 表格边框属性

如果不定义边框属性，表格将不显示边框，但是大多数时候，我们希望显示边框。

我们可以在在table标签中添加border属性，border的属性值可以直接位数字，省略单位像素（px）。

<body>
    <!--设置table的边框的宽度为1px，表格居中显示-->
    <table border="1" align="center">
        <!--设置每一行的高度为40px,内容显示居中。-->
        <tr height="40x" align="center">
            <!--设置每一列的宽度为120px-->
            <td width="120px">第1行-第1列</td>
            <td width="120px">第1行-第2列</td>
            <td width="120px">第1行-第3列</td>
        </tr>
        <tr height="40x" align="center">
            <td>第2行-第1列</td>
            <td>第2行-第2列</td>
            <td>第2行-第3列</td>
        </tr>
        <tr height="40x" align="center">
            <td>第3行-第1列</td>
            <td>第3行-第2列</td>
            <td>第3行-第3列</td>
        </tr>
    </table>
</body>

以上代码在Chrome浏览器中显示的效果为：

783cbf52e3ef12141705aa0cb3e8f748.png

那么我们该怎么取消table表格中的双层边框呢？我们可以把cellspacing的属性的值设置为0。

cellspacing是表格里单元格之间的距离; cellpadding是表格里单元格内的空白部分;

<body>
    <!--cellspacing属性的值设置为0,两根线合称为一根线-->
    <!--cellpadding属性设置文字内容和边框的距离-->
    <table border="1" align="center" cellpadding="10" cellspacing="0">
        <tr height="40x">
            <td>第1行-第1列</td>
            <td>第1行-第2列</td>
            <td>第1行-第3列</td>
        </tr>
        <tr height="40px">
            <td>第2列-第1行</td>
            <td>第2列-第2行</td>
            <td>第2列-第3行</td>
        </tr>
        <tr height="40x">
            <td>第3行-第1列</td>
            <td>第3行-第2列</td>
            <td>第3行-第3列</td>
        </tr>
    </table>
</body>

以上代码在Chrome浏览器中显示的效果为：

783cbf52e3ef12141705aa0cb3e8f748.png

2. 表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<body>
    <table align="center" border="1" cellspacing="0">
        <tr align="center" height="40px">
            <!--设置表格的表头-->
            <th width="70px">演员</th>
            <th width="90px">代表作</th>
        </tr>
        <tr align="center" height="40px">
            <td>成龙</td>
            <td>警察故事</td>
        </tr>
        <tr align="center" height="40px">
            <td>周星驰</td>
            <td>大话西游</td>
        </tr>
        <tr align="center" height="40px">
            <td>李连杰</td>
            <td>少林寺</td>
        </tr>
    </table>
</body>

以上代码在Chrome浏览器中显示的效果为：

783cbf52e3ef12141705aa0cb3e8f748.png

3. 表格的标题

在<table>标签中添加<caption>标签。

<body>
    <table align="center" border="1" cellspacing="0">
        <!--给表格设置标题-->
        <caption>优秀男演员代表作</caption>
        <tr align="center" height="40px">
            <!--设置表格的表头-->
            <th width="70px">演员</th>
            <th width="90px">代表作</th>
        </tr>
        <tr align="center" height="40px">
            <td>成龙</td>
            <td>警察故事</td>
        </tr>
        <tr align="center" height="40px">
            <td>周星驰</td>
            <td>大话西游</td>
        </tr>
        <tr align="center" height="40px">
            <td>李连杰</td>
            <td>少林寺</td>
        </tr>
    </table>
</body>

4. 表格跨行跨列

在<td>或<th>标签中添加colspan属性实现跨列操作。

<body>
    <table border="1" align="center" cellspacing="0" cellpadding="10">
        <caption>横跨两列的单元格</caption>
        <tr height="35px">
            <th>姓名</th>
            <!--添加colspan属性，实现跨两列单元格-->
            <th colspan="2">手机号</th>
        </tr>
        <tr height="35px">
            <td>周安德</td>
            <td>18911450210</td>
            <td>18523202346</td>
        </tr>
        <tr height="35px"  align="center">
            <td>谭健</td>
            <td>18911450210</td>
            <td>18523202346</td>
        </tr>
    </table>
</body>

以上代码在Chrome浏览器中显示的效果为：

783cbf52e3ef12141705aa0cb3e8f748.png

在<td>或<th>标签中添加rowspan属性实现跨行操作。

<table border="1" cellspacing="0" cellpadding="10">
    <caption>横跨两行的单元格：</caption>
    <tr>
        <th>姓名</th>
        <td>周安德</td>
    </tr>
    <tr>
        <!--添加rowspan属性，实现跨两行单元格-->
        <th rowspan="2">手机号</th>
        <td>18911450210</td>
    </tr>
    <tr>
        <td>18523202346</td>
    </tr>
</table>

以上代码在Chrome浏览器中显示的效果为：

783cbf52e3ef12141705aa0cb3e8f748.png
weixin_39799565
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap CSS全局样式和表格样式源码解析
12-29
CSS全局样式 1、布局容器类样式：.container 和 .container-fluid .container 固定宽度并且具有响应式。 .container-fluid 自由宽度(100%宽度)。 这2个class是直接在body标签下建立一个div标签，class等于这2个中的...
html 怎么让tr的css覆盖td的_HTML 使用表格制作简单的个人简历
weixin_39647471的博客
12-01 54
复习一下HTML，用表格做一个简单的个人简历<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>006</title> <style> .btbg{ text-align:center; } </style> </head&g...
flask html 得到文本框 input的内容_你需要知道的HTML知识
weixin_39992831的博客
11-03 254
前端三大件：HTML+CSS+JS今天我们就来说一说HTML，可能很多人觉得这个太简单了，就是平常写网页的一堆元素。然而越是基础的东西人们越容易忽略，所以特意梳理了下相关知识，希望加深对它的理解。是什么HTML（HyperText Markup Language）超文本标记语言。顾名思义，它是一门语言，用来标记文档结构的语言。就像你写 word 一样，有各种格式和大纲，HTML描述了网页文档的结构...
汇总常用的jQuery操作Table tr td方法
Masha
07-07 538
虽然现在DIV+CSS进行页的布局大行其道，但是很多地方使用table还是有很多优势，用table展示数据是比较方便的，下面汇总了jQuery操作Table tr td常用的方法，熟记这些操作技巧，下次再使用的到时候，会让你如鱼得水，提高开发效率。 1.鼠标移动行变色  $("#table1 tr").hover(function(){    $(this).children("...
当鼠标移到单元格(tr、td)背景变色 多种解决方案
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
(转)使用JavaScript和DOM动态创建表格
weixin_30823227的博客
11-28 360
第一次翻译技术文章，本身英语水平很烂，翻译的也是自己刚开始学习的技术，所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译，免得被误导。阅读原文简介　　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，比...
使用HTML开发商业网站-CSS控制表格边框课件.pptx
07-10
除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。 本节将从边框、边距和宽高三个方面，详细讲解CSS控制表格样式的具体方法。 CSS控制...
使用HTML开发商业网站-CSS控制单元格边距课件.pptx
07-10
除了表格标签自带的属性外，还可用CSS的边框、宽高、颜色等来控制表格样式。此外，CSS中还提供了表格专用属性，以便控制表格样式。 本节将从边框、边距和宽高三个方面，详细讲解CSS控制表格样式的具体方法。 CSS控制...
CSS去除表格的默认间距并且制作1px的细线表
12-29
现在在所谓“div css”的风气下，很多人放弃了表格，其实应该让每个标签物尽其用，在表现数据的地方，我们还是应该使用table。但是，我们在建立table的时候，会发现它会具有一些默认的样式，比如单元格td之间会有...
html&css;&JavaScript;基础笔记
01-15
1. 表格——<table><tr><th><td> 7 2. table的属性 7 3. 表格分列——水平分列和竖直分列 7 Body体里面的标签——表单 8 1. 表单标签——get、post 8 2.表单控件——<input type=“text/password/checkbox/file.....
jquery 怎么获取tr下的第二个td元素？
丰的博客
01-11 1万+
jquery 怎么获取tr下的第二个td元素？ https://zhidao.baidu.com/question/235781000.html
jQuery-----实现拖拽td单元格到其他上面，实现td内容交换的源码分析
define_LIN的博客
09-06 1846
基于jQuery，实现td单元格的拖拽和交换 &amp;lt;script type=&quot;text/javascript&quot; src=&quot;https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;style&amp;gt; td.hover{border:dotted 3
tr.lastChid获取不到最后一个单元格的值
XiaopinOo的博客
04-03 781
好久不写前端代码了，最近遇到一个简单的问题 通过tr.lastChild获取不到最后一个td,查看了js代码，html代码都感觉没问题，最后通过控制台知道问题在哪了。 本人table是这样写的 姓名 年龄 性别 啦啦 20 女 将移到的后边即可解决这些
jsp技巧
五香 J2EE的学习平台
10-21 634
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. IE地址栏前换成自己的图标6. 可以在收藏夹中显示出你的图标
记录Vue v-for渲染两个tr渲染不出来，将之加到tbody上
qq_45654741的博客
03-21 952
<tbody id="historical" v-for="hisList in hisList"> <tr class="list-tr"> <td> <span class="career-title">{{hisList.ltrTitle}}</span> .
将ajax获取到的整个tr的结构，把tr里面的每个td单独取出来
qq_41942913的博客
01-06 326
obj[0].text是ajax获取到的整个<tr><td></td></tr>的结构，我要把<tr><tr/>里面的每个<td></td>单独取出来，是在ajax里面用jq取出来。试了很多方法都没有用，我就用<table>标签把 obj[0].text放进去，这样就能单独取出来了。 $("...
网页常用小技巧(javascript)
热门推荐
hexzwj的专栏
08-07 1万+
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. IE地址栏前换成自己的图标6. 可以
点击某个td获取同tr中其他td---closest（）
chenggang_zh的博客
11-22 2688
问题描述： 操作中的“开始稽查”是一个a标签 ， 点击触发click时间后， 修改同tr中的状态一列 “待稽查” 为 “正在稽查”。 查阅其他人的方法 parent方法并不好用， 不知道什么原因。 所以采用jquery的closest() 方法 ， 返回被选元素的第一个祖先元素。 具体方法请自行百度或参考： https://www.cnblogs.com/liaolijun/p/7...
html tr加样式,Javascript操作table,tr,td和表格CSS样式设置小常识
最新发布
05-27
可以在tr标签内部使用style属性直接定义样式，例如： ```html <tr style="background-color: #f0f0f0;"> ``` 也可以在CSS文件中使用选择器来设置tr的样式，例如： ```css table tr { background-color: #f0f0f0;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值