CSS中border和colspan

最新推荐文章于 2023-04-22 21:01:35 发布
最新推荐文章于 2023-04-22 21:01:35 发布
阅读量4.3k 收藏 1
点赞数 1
分类专栏： EXT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weirdowang/article/details/80165146
版权

colspan的定义用法：

colspan 属性规定单元格可横跨的列数。

<td colspan="value">

示例代码：

<html>
<body>

<table width="100%" border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
  </tr>
</table>

</body>

</html>

示例结果：


示例代码：

<html>
<body>

<table width="100%" border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="1">January</td>
  </tr>
  <tr>
    <td colspan="1">February</td>
  </tr>
</table>

</body>

</html>

示例结果：



border的定义用法：

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

  • border-width
  • border-style
  • border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

可能的值

值描述
border-width规定边框的宽度。参阅：border-width 中可能的值。
border-style规定边框的样式。参阅：border-style 中可能的值。
border-color规定边框的颜色。参阅：border-color 中可能的值。
inherit规定应该从父元素继承 border 属性的设置。

border-width可能的值

值描述
thin定义细的边框。
medium默认。定义中等的边框。
thick定义粗的边框。
length允许您自定义边框的宽度。
inherit规定应该从父元素继承边框宽度。

border-style 可能的值

值描述
none定义无边框。
hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。

border-color可能的值

值描述
color_name规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent默认值。边框颜色为透明。
inherit规定应该从父元素继承边框颜色。

示例代码：

<html>
<head>
<style type="text/css">
p //这个p很重要啊，不能没有
{
border: thick solid rgb(250,0,255)//依次为三个属性，边框宽度、边框样式、边框颜色
}
</style>
</head>

<body>
<p>Some text</p>
</body>

</html>

示例结果：

border-style可以单独使用

border-style的定义用法：

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

示例代码：

<html>
<head>
<style type="text/css">
 p
{
border-style:solid solid double dashed;//四个属性依次为上、右、下、左边框的样式。可能值在上方。
}
</style>
</head>

<body>
<p>Some text</p>
</body>

</html>

示例结果：



使用 HTML 和 CSS 实现火狐浏览器中的 colspan 功能
CbrFullstack的博客
10-02 123
表格是一种非常有用的元素，可以将数据以有序的方式呈现给用户。通过运行上面的代码，您将看到一个包含了合并单元格的表格。“联系方式” 这个单元格将横跨两列，显示为一个较宽的单元格。的方式，我们将 “联系方式” 这个单元格合并成了一个跨两列的单元格，使其占据了相邻的两个单元格的位置。有时候，我们需要将某些单元格合并成一个大单元格，以便在表格中显示更复杂的结构。属性可以实现更复杂的表格布局，特别是在处理跨列合并的情况下。在上面的示例中，我们创建了一个简单的表格，包含了姓名、年龄和联系方式等列。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6696
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
css-colspan rowspan cols rows
快乐
03-03 1367
col:列,row:行,span:跨度,跨距,范围 rowspan、colspan通常使用在td与th标签中 rowspan 属性  --  可以实现HTML表格中一列跨越多行 colspan 属性  --  可以实现HTML表格中一行跨越多列 rows属性 -- 当前控件的宽度 cols属性 -- 当前控件的高度  &lt;td rowspan="2" colspan="...
CSS_td标签中的colspan
trace的技术备忘专栏
05-05 5757
最近做了一些表单,内容很多,在td标签中使用了不少的colspan,测试后发现有些问题.        比如在CSS中定义好td { width:80px;},这样一个的格子width应该是240px.填写一些内容,在FF中是正常的,浏览器会智能地把这个td当成三个打通了的格子.但IE中就惨了,浏览器把这个colspan = 3的格子依旧认作一个格子,文字到了80px的地方就会自动换行了.
在外部CSS中实现Table td的colspan
weixin_33826268的博客
04-21 473
个人感觉Table布局一直都是比较麻烦的 前阵子有个客户需求，要把下面代码中的colspan=3去掉，在外部css中定义 &lt;table border="2px"&gt;    &lt;tr&gt;        &lt;td colspan="3" &gt;            table content        &lt;/td&gt;    &lt;/tr&gt;   
html colspan标签,CSS中的HTML colspan
weixin_39865866的博客
07-22 289
月关宝盒据我所知，css中没有colspan，但column-span在不久的将来会有多列布局，但由于它只是CSS3中的草稿，你可以在这里查看。无论如何，你可以使用div和span像这样的表格式显示做一个解决方法。这将是HTML：forthesakeoftable-lesslayout.*/.table{display:table;table-layout:fixe...
CSS3中文完全开发手册
11-29
3. **column-span**：让元素跨越多列，类似于表格中的`colspan`属性。 **三、边框与背景** 1. **圆角边框**：使用`border-radius`属性创建圆形或椭圆形的边框。 2. **阴影效果**：`box-shadow`和`text-shadow`为...
HTML+CSS学习笔记4
xiaohua307的博客
02-14 468
html标签 列表 有序列表（块级） <ol> <li>政治新闻</li> <li>娱乐新闻</li> </ol> 无序列表（块级） <ul> <li><a href="#">服装<a></li> <li>文具&l...
20个CSS/CSS3常用样式汇总
09-25
在CSS和CSS3中，掌握一些常用的样式可以极大地提高网页设计和开发的效率。下面将详细解释提供的20个常用CSS样式，以及它们在实际应用中的作用。 1. `white-space: nowrap;`：此属性用于强制文本在一行内显示，不...
html表单元素的colspan和rowspan合并单元格
流楚丶格念的博客
01-02 8627
文章目录colspan和rowspancolspanrowspan代码案例 colspan和rowspan colspan和rowspan这两个属性用于创建特殊的表格。 colspan colspan用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。 rowspan rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行。 rowspan通常使用在td和th标签中 row:行,span:跨度,跨距,范围 c
css 合并行 和并列 colspan , rowspan
a520songhai的博客
07-05 6012
&lt;table border="1" width="100" height="100"&gt; &lt;tr&gt; &lt;td colspan="2"&gt;sv&lt;/td&gt; &lt;td&gt;ddddd&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &
html中colspan属性
lzefforts的博客
11-16 504
colspan属性可以实现HTML表格中一行跨越多列 [code="java"] www.dreamdu.com .com域名的数量 .cn域名的数量 .net域名的数量 ...
csstable跨列居中_HTML表格跨行、跨列操作(rowspan、colspan)
weixin_29469949的博客
12-24 1713
一般使用元素的colspan属性来实现单元格跨列操作，使用元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示：例如：星期一星期二星期天实现结果如下图所示：rowspan属性规定单元格可横跨的列数，所有浏览器都支持rowspan属性。其取值为number，如下图所示：例如：星期一星期二星期三实...
CSS之表格属性
最新发布
qq_73289653的博客
04-22 1074
无作用，因为border-collapse：collapse合并了单元格边框。和Rowspan的作用，如图三分别合并了行rowspan和列colspan。（默认为separate，就是无合并，collapse就是合并了），Cellpadding， Border-collapse 作用。具体如代码注释和实行效果更加清楚的了解表格属性，运行结果如图四。如图一设置了cellspacing和cellpadding。和Border-collapse：collapse。单元格与内容边界之间的关系。表头（会加粗，居中）
CSS合并单元格四种方式：table/display/flex/grid
热门推荐
weixin_43932309的博客
07-12 2万+
CSS合并单元格四种方式：table/display/flex/grid。
CSS border
卋舉
10-11 127
虚线(dashed); 实线(solid); 双线轮廓(double); 顶部边框的线 border-top:1px solid gray; 取消边框 border:none; 有边框,但像素为0 border:0; 边框透明 border:transparent; 三角形箭头 font-size:0; width:0; height:0; border:15px solid transparent; border-left-color:aqua; border-top-color:green; 取消下划
HTML常用标签以及CSS常用样式
wasdf231的博客
06-13 1589
HTML常用标签，CSS常用样式
巧用CSS的Border属性 学习（1）
aiouwen521的专栏
08-31 4277
     首先申明，我是个HTML菜鸟，对它非常的白痴。不清楚大学怎么混的。     给文本加边框：     老是看到 style="border: 3px solid red"这样的语句，可是不知道究竟是什么意思。solid?是什么呢，趁着任务刚结束上网学习了一下，嘿嘿，又自己亲自做了一遍，终于wakalimasita!     第一步：style="border:thin solid red"; 搞清楚"border"后面的三个参数的含义，对理解非常重要。                边框线的宽度是：
html 代码 border,HTML Style border用法及代码示例
weixin_33914255的博客
06-07 2146
DOM样式的border属性用于设置或返回元素边框的样式。我们可以为各个侧面(顶部，右侧，底部，左侧)设置不同的边框样式。 border-style属性的每一侧都可以采用多个值。用法:它用于返回Style属性。object.style.borderStyle它用于设置样式属性。object.style.borderStyle = valueDOM border-style属性值none:没有创建边...
table表格的单元格的合并【colspan】和【rowspan】
夏天的风
10-24 6212
tab标签展示数据非常方便，但是有些情况下需要进行单元格的合并，colspan和rowspan 可轻松实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值