用HTML画出一个圆角的Table表格

最新推荐文章于 2021-06-17 08:28:24 发布
原创 最新推荐文章于 2021-06-17 08:28:24 发布 · 650 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #html #border

本文详细解析了一个复杂的表格布局结构，通过具体的HTML代码展示了不同单元格的背景颜色和宽度设置，为前端开发者提供了关于如何精确控制表格样式的实例。

<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=3 width="100%">
<TD><TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD bgColor=#908a47></TD>
<TD width=1></TD>
<TD width=1></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47></TD>
<TD bgColor=#f7f8f9 colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR>
<TD> <TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=1 bgColor=#908a47></TD>
<TD id=oINNER bgColor=#f7f8f9>&nbsp; </TD>
<TD width=1 bgColor=#908a47></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
<TR height=3 width="100%">
<TD> <TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR height=1>
<TD width=1></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#f7f8f9></TD>
<TD width=1 bgColor=#908a47></TD>
<TD width=1></TD>
</TR>
<TR height=1>
<TD></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD bgColor=#f7f8f9></TD>
<TD bgColor=#908a47 colSpan=2></TD>
<TD></TD>
</TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=#908a47></TD>
<TD colSpan=3></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>

原生html+css实现表格圆角效果
weixin_44528408的博客
08-12 1297
有个需求需要用原生html+css的原生table标签实现圆角表格。有的方式圆角会很模糊，或者有毛边，查找资料+调整后实现了这个功能。
table 圆角 html5 css3
10-16
table 圆角 html5 css3
圆角表格的实现
05-14
环境：vs2005<br><br>不使用图片 JS 实现的圆角表格效果<br>
html+css做圆角表格
weixin_34258782的博客
05-09 155
]&lt;html&gt;&lt;head&gt;&lt;title&gt;css圆角效果&lt;/title&gt;&lt;meta http-equiv="content-type" content="text/html; charset=gb2312"&gt;&lt;style type="text/css"&gt;div.RoundedCorne
教你如何制作精美的圆角表格
weixin_33922670的博客
04-24 536
做网页时候为了美化网页，常常把表格边框的拐角处做成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观。下面就给大家介绍两种制作圆角表格的常用的办法。 方法一：用图片制作圆角表格 这是最常用也是最通用的方法，它能很好地适应各种浏览器和不同分辨率，大部分网页都使用这种方法。 ①先用Photoshop等作图软件绘制一个圆角矩形，再用“矩形选框工具”选取左上交的圆角部分（如图1），...
用&lt;TABLE&gt;语句来实现圆角表格可以省去制作圆角图片之苦！
10-30
具体实现方式是在表格的四个角上分别放置一个单元格，并为这些单元格设置适当的边框颜色以及宽度，以及一个较宽的背景色单元格来覆盖角单元格的边框，以此来模拟圆角效果。示例代码如下： ```html <TABLE style=...
CSS 用ul li做圆角表格
09-25
本文档将详细讲解如何使用HTML中的`<ul>`和`<li>`元素来构建一个具有圆角效果的表格，并通过CSS样式对表格进行美化。这种方法相较于传统的`<table>`标签更具灵活性，并能够更好地适应现代Web设计的需求。 #### 二、...
div css圆角代码各种圆角表格_圆角边框css圆角
11-11
例如，如果我们希望一个 `div` 元素的所有边角都是 10px 的圆角，可以这样编写 CSS： ```css div { border-radius: 10px; } ``` 若要为不同角设置不同圆角半径，可以分别指定： ```css div { border-top-left-...
圆角表格制作原理html,html做圆角表格
weixin_29000891的博客
05-31 497
将以下代码插入在合适的单元格位置中：style="table-layout: fixed" height=28 cellspacing=0 cellpadding=0width="50%" border=0> cellspacing=0 cellpadding=0 width="100%" border=0> cellspacing=0 cellpadding=0 border=0&g...
如何只用HTML画出一个圆角的Table表格?
.NET博文收藏
12-18 507
By Ben实现代码如下:   Trackback: http://tb.blog.youkuaiyun.com/TrackBack.aspx?PostId=131489
圆角表格代码
11-27
<TABLE fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=3 width="100%"> <TD> <TABLE fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=1> <TD width=1></TD> <TD width=1></TD> <TD width=1></TD> <TD bgColor=#908a47></TD> <TD width=1></TD> <TD width=1></TD> <TD width=1></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD bgColor=#f7f8f9></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47></TD> <TD bgColor=#f7f8f9 colSpan=3></TD> <TD bgColor=#908a47></TD> <TD></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD> <TABLE fixed" height="100%" cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=1 bgColor=#908a47></TD> <TD id=oINNER bgColor=#f7f8f9>  </TD> <TD width=1 bgColor=#908a47></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR height=3 width="100%"> <TD> <TABLE fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=1> <TD width=1></TD> <TD width=1 bgColor=#908a47></TD> <TD width=1 bgColor=#f7f8f9></TD> <TD bgColor=#f7f8f9></TD> <TD width=1 bgColor=#f7f8f9></TD> <TD width=1 bgColor=#908a47></TD> <TD width=1></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD bgColor=#f7f8f9></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD></TD> </TR> <TR height=1> <TD colSpan=3></TD> <TD bgColor=#908a47></TD> <TD colSpan=3></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE>
html5 table 圆角
黄彪博客
09-07 9454
在工作中遇到这么一个问题 —— 美工画了一个表格，表格是使用圆角的。发现table这个标签画圆角很麻烦，因此使用了如下技术解决问题： 1、div 以 display : table;显示 2、border-radius: 10px 0px 0px 0px;顺序依次是 上 右 下 左 3、通过CSS3伪类查找，设置样式   .div_table{ display: table;} .
纯HTML实现圆角表格
griefforyou的程序人生
07-14 1846
  这是效果图，下面是代码                                                                                                                                  
圆角的表格
我的地盘—我做主
05-12 173
&lt;html&gt;&lt;style type="text/css"&gt;.rd{font-family: "宋体";font-size: 14px;height: 12px;width: 12px;margin: 0px;padding: 0px;line-height: 12px;}#l{filter:DropShadow(Color=#00ccff,OffX=1,OffY=0)Dro...
html表格圆角样式,CSS表格样式：圆角，隔行，变色的具体实现
weixin_39629989的博客
06-17 501
先看效果图：CSS：复制代码代码如下:table {max-width: 100%;background-color: transparent;border-collapse: collapse;border-spacing: 0;}.table {width: 100%;margin-bottom: 18px;}.table th, .table td {padding: 8px;line-h...
html 圆角table
迪士尼公主的专栏
05-07 1406
http://www.w3.org/1999/xhtml">CSS*{margin:0;padding:0;}body { font: 11px Arial, sans-serif; padding: 10px; color: #333;}.divBox { padding: 10px; border-right: 1px solid #000; border-left: 1px solid #0
纯HTML 实现圆角表格
zl198183的专栏
10-22 1824
我以前写过一篇文章，介绍了在PS里制作圆角表格的技巧，其实就是做了一个图片听说CSS3里将要增加圆角表格的属性，不过在CSS3发布之前，还有一个简单的办法，就是使用下面的方法。我已经用在很多地方，自我感觉不错，拿出来大家见笑..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值