用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦！

2024-09-26 23:26:07

语句：

<DIV align=center>
<TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR height=1>
<TD width=1></TD><TD width=1></TD><TD width=1></TD>
<TD bgColor=边框颜色></TD>
<TD width=1></TD><TD width=1></TD><TD width=1></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>
<TD bgColor=背景色></TD>
<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=3></TD>
<TD bgColor=边框颜色></TD><TD></TD></TR>
<TR>
<TD width=1 bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=5>
<TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=3>
<TBODY>
<TR>
<TD align=center>你要写的文字、图片、或表格</TD>
</TR></TBODY></TABLE>
</TD>
<TD width=1 bgColor=边框颜色></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色></TD>
<TD bgColor=背景色 colSpan=3></TD>
<TD bgColor=边框颜色></TD><TD></TD></TR>
<TR height=1>
<TD></TD><TD bgColor=边框颜色 colSpan=2></TD>
<TD bgColor=背景色></TD>
<TD bgColor=边框颜色 colSpan=2></TD><TD></TD></TR>
<TR height=1>
<TD colSpan=3></TD>
<TD bgColor=边框颜色></TD>
<TD colSpan=3></TD></TR>
</TBODY></TABLE></DIV>

虽然代码看起来很长，其实原理很简单，昨天我把原代码精简了一下，将嵌套的表格从四个减少到两个，应该更好理解了吧。需要指出一点，“cellPadding=3”是避免表格内文字过于贴近表格边框而特意添加的！

制作这个圆角表格的主要目的有两个：一是可以用来作为带背景色的日志模板，实例参考教程（一）；二是可以制作自己日志标题档或者签名档，用处还是很大的。用<Table>语句制作圆角表格，和网上其他常见方法相比，不仅省去了制作、使用圆角图片的麻烦，而且此圆角表格具有“自适应性”——因为语句中使用的是相对宽度（width=100%），所以此表格会随着发布日志栏的宽度变化而自我调节，这比一般图片做出来的圆角表格更具灵活性！

（一）表格基本语句格式

<TABLE>...</TABLE> —— 表格指令

<TR>...</TR> —— 表格行

<TD>...</TD> —— 表格栏

<TBODY>...</TBODY> —— 表格主体部分

<CAPTION>...</CAPTION> —— 表格标题

<TH>...</TH> —— 表格栏标题（粗体字）

这五个表格基本语句是构成一个表格的骨架，其中<Table>、<TR>、<TD>是最重要的标记，学会这三个语句就已经能画出一个完整的表格了。请看下面这个简单的例子。

语句：

效果：

收支表
公司	收入	支出
A	￥100000	￥60000

（二）表格相关属性

1、<TABLE>语句常用属性

示范语句：

具体说明：

width="50%"，表格宽度，接受绝对值（如 300）及相对值（如 80%）。
rules="ALL"，表格内网格，可选值为： all，none，cols，rows，groups。
border="1"，表格边框宽度，如果去掉这个属性，就生成无边框表格。
cellspacing="2"，表格内格线宽度，数值越大，格线越粗。
cellpadding="2"，文字与格线间距，数值越大，间距越大。
align="CENTER"，表格的摆放位置（水平），可选值为： left, right, center。
valign="TOP"，表格内图文的摆放位置（垂直），可选值为： top, middle, bottom。
background="background.gif"，表格内背景图案，不要与 bgcolor 同用。
bgcolor="#0000FF"，表格背景色，不要与 background 同用。
bordercolor="#FF00FF"，表格边框颜色。
hspace="10"，表格边框与环绕文字间水平距离，数值越大，间距越大。
vspace="10"，表格边框与环绕文字间垂直距离，数值越大，间距越大。
其他表格属性，因为有些不是很常用，或者有些对浏览器类型有要求，并未列出。

2、<TR>语句常用属性

示范语句：

具体说明：

align="RIGHT"，表格行内文字的摆放位置（水平），可选值为： left, right, center。
valign="MIDDLE"，表格行内图文的摆放位置（垂直），可选值为： top, middle, bottom。
background="background.gif"，表格行内背景图案，不要与 bgcolor 同用。
bgcolor="#0000FF"，表格行内背景色，不要与 background 同用。
bordercolor="#FF00FF"，表格行内边框颜色。

3、<TD>语句常用属性

示范语句：

具体说明：

width="50%"，单元格宽度，接受绝对值（如 300）及相对值（如 50%）。
height="300"，单元格高度，接受绝对值（如 300）及相对值（如 50%）。
colspan="2"，单元格向右合并栏数，只需写在合并起始单元格中。
rowspan="3"，单元格向下合并栏数，只需写在合并起始单元格中。
align="LEFT"，单元格内文字的摆放位置（水平），可选值为： left, right, center。
valign="BOTTOM"，单元格内图文的摆放位置（垂直），可选值为： top, middle, bottom。
background="background.gif"，单元格内背景图案，不要与 bgcolor 同用。
bgcolor="#0000FF"，单元格内背景色，不要与 background 同用。
bordercolor="#FF00FF"，单元格内边框颜色。
其他单元格属性，因为有些不是很常用，或者有些对浏览器类型有要求，并未列出。

（三）表格简单的例子

1、去掉<Table>中的 Border 参数即可得到无边框表格。

语句：

效果：

收支表
公司	收入	支出
A	￥100000	￥60000

2、通过 Border、BorderColor，改变表格边框的大小与颜色。

语句：

效果：

公司	收入	支出
A	￥100000	￥60000

3、通过 Cellspacing 还可以调节单元格间距离。

语句：

效果：

公司	收入	支出
A	￥100000	￥60000

4、ColSpan 与 RowSpan 的使用。

语句：

效果：

公司	收支		盈利 !
A	￥100000	￥60000	盈利 !

这里对表格的基本介绍，主要是为了下一篇教程做个铺垫。在下一篇教程中，将给出一些表格在 MSN Space 里的具体应用实例，比如：文绕图结构、多栏文字、给文字添加背景等。

用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦！

语句: <DIV align=center> <TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%"> <TBODY> <TR height=1> <TD width=1></TD><TD width=1></TD><TD width=1><
iOS设置可选择圆角方向的控件圆角

前言这篇文章主要给大家介绍利用iOS如何设置可选择圆角方向的控件圆角,话不多说,以下是实现的示例代码,一起来看看吧. 示例代码一.通过设置控件layer的cornerRadius来设置圆角 self.view.layer.cornerRadius =10.f;//如果设置圆角角度为半圆,则数值为控件高度的一半 self.view.layer.masksToBounds = YES;//是否删除多余的位置二.通过贝塞尔曲线来设置圆角 UIBezierPath *maskPath = [UIB
Android中使用BitmapShader类来制作各种图片的圆角

public BitmapShader(Bitmap bitmap,Shader.TileMode tileX,Shader.TileMode tileY) 调用这个类来产生一个画有一个位图的渲染器(Shader). bitmap:在渲染器内使用的位图 (1)tileX:The tiling mode for x to draw the bitmap in. 在位图上X方向花砖模式 (2)tileY:The tiling mode for y to draw the bitmap in.
DOTNETBAR制作圆角窗体和圆角控件代码实例

1.如果制作圆角窗体,窗体先继承DOTNETBAR的:public partial class Form2 : DevComponents.DotNetBar.Office2007Form 然后窗体里加上一个DONTERBAR的panel,然后设置panel为fill占满整个窗体然后设置panel的CornerType为Rounded,然后窗体就变为圆角的了: panelEx1.Style.CornerType = DevComponents.DotNetBar.eCornerType.Rou
解决iview table组件里的固定列表格不自适应的问题

当在使用iview Table组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug 很简单把组件里的 width 改为 minWidth 即可 columns: [ { title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }, { title: '订阅名称', key: 'subscriptionName', minWidth:140 }, { title: '订阅ID', key: 'subscrip
Winform控件优化Paint事件实现圆角组件及提取绘制圆角的方法

目录前言 Paint事件中实现圆角控件提取绘制圆角矩形和旁边小尖角的代码为扩展方法介绍扩展方法测试尖角的显示位置重绘控件后文本的处理同时重绘文本通过添加Label控件实现对文本的处理[有尖角时需要额外处理] Paint事件中绘制圆角的优点窗体失去焦点时按钮外观边框问题 Paint事件中绘制控件的问题[不要使用(事件)参数e.ClipRectangle] 前言 Windows 11下所有控件已经默认采用圆角,其效果更好.相对有着更好的优化,只是这是默认的行为,无法进一步自定义.
Oracle Table Demo语句应用介绍

在开发过程中可能会用到oracle table demo 操作语句,本文将以此进行介绍,需要的朋友可以参考下Sql代码复制代码代码如下: -- Created on 2010/07/29 by WANGNAN declare -- Local variables here i1 VARCHAR2( 20) := '1' ; i2 VARCHAR2( 20) := '1' ; i3 VARCHAR2( 20) := '2' ; i4 VARCHAR2( 20) := '3' ; i5 VARC
flex渐变色制作圆角橙色按钮示例代码

复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009
SQL语句实例说明方便学习mysql的朋友

MySQL中模式就是数据库 SHOW DATABASES; show databases;罗列所有数据库名称 CREATE DATABASE <数据库名> create database TEST;创建名为TEST的数据库 DROP DATABASE <数据库名> drop database TEST;删除名为TEST的数据库 USE <数据库名> use TEST;使用名为TEST的数据库 SHOW TABLES show tables;显示当前数据库所有表格 SHO
JS组件Bootstrap Table布局详解

Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 表格类下表样式可用于表格中: <tr>, <th> 和 <td> 类下表的类可用于表格的行或者单元格: 基本的表格如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示: <div class="row"> <table class="table"

用&lt;TABLE&gt;语句来实现圆角表格可以省去制作圆角图片之苦！

相关推荐

随机推荐

用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦！