【web前端】table的border属性解析（内联样式表和内部样式表中的区别）

今天做实验的时候被table的border属性搞的眩晕(´･Д･)」特此总结一下。

（我不去学前端框架那些高级知识在纠结这些大作业用不到的基础东西干啥。。）

一、内部样式表中内table的border属性测试

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1px"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>

效果：

（看完之后表示table的内部样式吧已弃用(｡ì _ í｡)！！）

二、内联样式表中内table的border属性测试

1、基础测试

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border: 1px solid black;}</style>
</head>
<body>
<table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>

效果：

发现只有边框被显示成了黑色

2、修改代码，使水平竖直分割线显示

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border: 1px solid black;}</style>
</head>
<body>
<table rules="all"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>

效果：

3、为每个单元格设置边框

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border: 1px solid black;}td{border: 1px solid black;}</style>
</head>
<body>
<table ><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>

效果：

4、将边框和水平竖直线设为不同的样式

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border: 2px solid black;}tr{border: 1px solid red;}</style>
</head>
<body>
<table rules="all"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
</html>

效果：

注意：table的border的宽度一定要比tr的宽度大，例如将table的border也设为1px时，其他不变，效果为：

5、当表格嵌套时，如果只想给外层表格的单元格设置边框，而不给内层表格的单元格设置边框，可以用子选择符。

例如：代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>产品介绍页面制作</title><style type="text/css">/* 显示产品名称*/.p1{font-family:"黑体";font-size:20px;color:#3333ff}/*显示具体产品*/.p2{font-family:"黑体";font-size:30px;color:#3333ff}/*显示每一个子项目标题*/.bt1{color:#6600cc;font-size:25px;font-family:"微软雅黑";background-color:#999900}.table1{background-color:#ffff66;width:650px;height:500px;text-align: left;}/*看这里！！这里是重点！！子选择符！！且“>”只能使用一次，table>tr>rd无效（目前测出来是这样的）*/.tr1>td{border: 1px solid black;}</style>
</head>
<body>
<table class="table1"><tr class="tr1"><td><img src="../Photos/hp-computer.png" width="290" height="222"></td><td><p class="p1">产品名称</p><p class="p2">惠普&nbsp;4431s&nbsp;(QG641PA)</p></td></tr><tr class="tr1"><td colspan="2" class="bt1">惠普4431s(QG641PA) 基本参数</td></tr><tr class="tr1"><td colspan="2"><table frame="void"><tr><td>CPU 主频: </td><td>2400.000</td> </tr><tr><td>CPU 系列: </td><td>英特尔酷睿i5 2 代系列(Sandy Bridge)</td></tr><tr><td>CPU 型号: </td><td>Intel酷睿i5 2430M</td></tr><tr><td>内 存: </td><td>DDR3 1333MHz 4GB, 最大内存容量：16GB</td></tr><tr><td>硬 盘: </td><td>7200转， SATA， 750GB</td></tr><tr><td>光 驱: </td><td>光驱内置DVD刻录机</td></tr><tr><td>屏 幕: </td><td>14.000</td></tr><tr><td>显 卡: </td><td>1GB, GDDR5, AMD Radeon HD 6490M独立显卡</td></tr></table></td></tr><tr class="tr1"><td colspan="2" class="bt1">惠普4431s(QG641PA) 多媒体设备</td></tr><tr class="tr1"><td colspan="2"><table frame="void"><tr><td>摄 像 头: </td><td>集成摄像头</td> </tr><tr><td>音频系统: </td><td>内置音效芯片纠错</td></tr><tr><td>多 媒 体: </td><td>内置扬声器、麦克风</td></tr></table></td></tr><tr class="tr1"><td colspan="2" class="bt1">惠普4431s(QG641PA) 网络通信及其它</td></tr><tr class="tr1"><td colspan="2"><table frame="void"><tr><td>无限网卡: </td><td>支持802 11***无线协议 Intel WiFi Link</td></tr></table></td></tr>
</table>
</body>
</html>

效果：

【web前端】table的border属性解析（内联样式表和内部样式表中的区别）相关推荐

内联样式表和内部样式表
此处保存的是我学习前端的笔记和一些日常练习,放在这里方便查看.成长之路难免会有错误,这时候才形象生动的体现那句经典名言:"失败是成功之母!" 哈哈哈哈...... 话不多说. ...
内部样式表、外部样式表、内联样式表
外部样式表: 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表 ,其书 ...
css语法，常用css语法，内部样式表，外部样式表，内联样式表, 样式优先级问题
1.css语法: 2.css常用属性: 3.内部样式表: 在head标签中书写style标签,然后在style标签中书写css,style标签具有type属性,属性值为"text/css&q ...
H5 css引入方式内联样式表
内联样式表通过style标签进行设置 <html> <head> <meta charset="utf-8"> <title>引入 ...
html 中内联样式表,html – CSS带有内联样式的伪类
不,这是不可能的.在使用CSS的文档中,内联样式属性只能包含属性声明;在样式表中的每个规则集中出现的同一组语句.从 Style Attributes spec: The value of the st ...
html的三种样式定义方式：外部样式表；内部样式表；内联样式表
html.css.javascript是网页中的三个基础,他们分别是数据.样式.行为. css样式分为三种 style.html <!--作者:948228952@qq.com时间:2015-0 ...
js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
登录验证中的判断逻辑 1.提示输入用户,输入8 - 16位密码2.检验输入用户名和密码是否正确用户名不允许空格,任何字符数字都行,不允许为空密码8-16位,不允许空格 ,小于8位给出提示密码必须 ...
CSS学习笔记-【内联样式、内部样式、外部样式表】 AND 2018-11-21（21:18）
一.内联样式 1.在DIV标签中添加内联样式. 添加style属性 . 在style中属性和值得表示方法为: style="属性:值;属性:值"; 例如: <div styl ...
DOM与元素节点内联样式
获取.设置及移除单个内联 CSS 属性每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...
css内联样式_如何覆盖内联CSS样式
css内联样式本文写于2009年,至今仍是我们最受欢迎的帖子之一. 如果您想了解有关CSS的更多信息,您可能会发现这篇有关CSS技术的文章对视网膜显示非常感兴趣. CSS的最强大功能之一就是层叠. ...

【web前端】table的border属性解析（内联样式表和内部样式表中的区别）

一、内部样式表中内table的border属性测试

二、内联样式表中内table的border属性测试

【web前端】table的border属性解析（内联样式表和内部样式表中的区别）相关推荐

最新文章

热门文章