<html>
<head>
<title>用css美化表格边框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.table1 {
border:#000000 dashed;
border-width:1 0 0 1
}
.td1 {
border:#000000 dashed;
border-width:0 1 1 0
}
.table2 {
border:#cc0000 solid;
border-width:1 0 0 1;
background:#ffffff
}
.td2 {
border:#cc0000 solid;
border-width:0 1 1 0
}
.table3 {
border:green dotted;
border-width:2 0 0 2
}
.td3 {
border:green dotted;
border-width:0 2 2 0
}
.table4 {
border:blue solid;border-width:2 1 1 2
}
.td4 {
border:blue solid;border-width:0 1 1 0
}
.table5 {
border:teal 4 double
}
.td5 {
border:teal 1 solid
}
.table6 {
border:3 outset
}
.td6 {
border: 1 solid
}
.table7 {
border:3 inset
}
.td7 {
border:1 solid
}
.table8 {
border:#ee0000 3 ridge
}
.td8 {
border:1 solid
}
.table9 {
border: 4 skyblue ridge
}
.td9 {
border:1 navy groove ;
background:#ffffff
}
.td10 {
border:maroon 3 double
}
.table11 {
border:purple 4 ;border-style:dashed double
}
.td11 {
border:1 solid
}
.out {
border-width:1;
border-style:solid;
border-color:#cccccc #333333 #333333 #cccccc
}
.in {
border-width:1;
border-style:solid;
border-color:#333333 #cccccc #cccccc #333333;
background:#ffcccc
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table1">
<tr >
<td class="td1">1 </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
<tr>
<td class="td1"> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
<tr>
<td class="td1"> </td>
<td class="td1"> </td>
<td class="td1"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr >
<td class="td2">2 </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table3">
<tr >
<td class="td3">3 </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
<tr>
<td class="td3"> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
<tr>
<td class="td3"> </td>
<td class="td3"> </td>
<td class="td3"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table4">
<tr >
<td class="td4">4 </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
<tr>
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
<tr>
<td class="td4"> </td>
<td class="td4"> </td>
<td class="td4"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table5">
<tr >
<td class="td5">5 </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
<tr>
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
<tr>
<td class="td5"> </td>
<td class="td5"> </td>
<td class="td5"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table6">
<tr >
<td class="td6">6 </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
<tr>
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
<tr>
<td class="td6"> </td>
<td class="td6"> </td>
<td class="td6"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table7">
<tr >
<td class="td7">7 </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
<tr>
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
<tr>
<td class="td7"> </td>
<td class="td7"> </td>
<td class="td7"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table8">
<tr >
<td class="td8">8 </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
<tr>
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
<tr>
<td class="td8"> </td>
<td class="td8"> </td>
<td class="td8"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="1" cellpadding="0" border="0" class="table9">
<tr >
<td class="td9">9 </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="2" cellpadding="0" border="0">
<tr >
<td class="td10">10 </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
<tr>
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
<tr>
<td class="td10"> </td>
<td class="td10"> </td>
<td class="td10"> </td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="0" cellpadding="0" border="0" class="table11">
<tr >
<td class="td11">11 </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
<tr>
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
<tr>
<td class="td11"> </td>
<td class="td11"> </td>
<td class="td11"> </td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="1" cellpadding="0" style="border:#cc0000 1 solid" >
<tr>
<td>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr >
<td class="td2">12 </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="3" cellpadding="0" style="border:#cc0000 1 solid" background="back.jpg">
<tr>
<td>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" class="table2">
<tr >
<td class="td2">13 </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2"> </td>
<td class="td2"> </td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p>
<table width="500" cellspacing="2" cellpadding="0" border="0" style="border:1 navy solid" background="back.jpg">
<tr >
<td class="td9">14 </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
<tr>
<td class="td9"> </td>
<td class="td9"> </td>
<td class="td9"> </td>
</tr>
</table>
<p> </p>
<table width="500" border="0" cellspacing="3" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in">15 </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%" class="out">
<tr>
<td class="in"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
效果：
分享到：
相关推荐
HTML表格用于组织和展示数据，而CSS则负责美化和优化表格的显示效果。理解并熟练掌握这两者，能帮助我们创建出既美观又功能强大的网页。在实践中，应始终关注可访问性和响应式设计，确保所有用户都能轻松浏览和理解...
- 学习如何通过CSS美化列表样式。 16. **第16章：表格** - 介绍如何使用HTML表格。 - 包括表格的基本结构和CSS样式设置。 - 实践示例展示如何创建复杂的数据表格。 17. **第17章：表单与输入** - 介绍HTML...
- `border`: 设定表格边框大小。 - `bgcolor`: 设定表格背景色。 - `bordercolor`: 设定边框颜色。 - `bordercolordark`和`bordercolorlight`: 分别设定边框的暗边和亮边颜色。 - `cellpadding`和`cellspacing`...
- **CSS2盒模型**：详细介绍CSS2盒模型的概念及其组成部分（内容、填充、边框、外边距）。 - **背景处理**：推荐使用背景图片而非独立图片，以提高页面加载速度和美观度。 #### 十一、网页设计DIV+CSS——第9天: 第...
你可以通过设置`border`属性来指定表格边框的宽度，或者使用`cellspacing`和`cellpadding`来调整单元格之间的间距。 ```html ``` 2. `<tr>`标签：它定义了一行表格。在一行中，你可以包含多个`<th>`或`<td>`...
其中，`border`属性设置表格边框的宽度，如`border="1"`表示边框为1像素。 创建表格的语法示例： ```html 移动 联通 铁通 <TD>IBM 惠普 华硕 ``` 表格可以使用`colspan`和`rowspan`属性实现...
### 网页开发复习资料知识点汇总 #### HTML基础 - **HTML文档的基本结构**：一个标准的HTML文档由`<html>`标签包裹，其中包含了`<head>`和`<body>`两个主要部分。 - `<head>`部分通常包含文档的元数据，如标题、...
5. **样式与格式**：理解如何应用样式、字体、颜色和边框来美化报表，以及如何使用样式表（CSS）来统一管理报表样式。 6. **分组与排序**：掌握如何对报表数据进行分组和排序，这对于生成汇总和统计报表至关重要。 ...
在实际的Web开发中，我们还需要结合CSS（Cascading Style Sheets）来美化表格，设置颜色、边框、对齐方式等样式。同时，为了提高用户体验，我们还可能需要使用JavaScript或jQuery来实现交互功能，如排序、过滤和分页...
4. **样式和格式**：学习如何设置字体、颜色、边框等样式属性，以美化报表的外观，并理解样式表（CSS）在报表中的应用。 5. **子报表和分组**：了解如何嵌套报表（子报表）以展示多层次的数据，以及使用分组功能对...
7. **样式和样式表**：讲解如何应用样式和模板来美化报表，包括字体、颜色、边框等，以及使用CSS样式的概念。 8. **图表制作**：介绍如何在报表中插入和定制各种类型的图表，如柱状图、饼图、线图等，以及如何动态...
三、交互与美化 现代网页开发中，表单和表格不仅需要功能完备，还需要有良好的用户体验和视觉效果。这通常通过CSS（层叠样式表）来实现，如设置字体、颜色、边框样式、背景等。另外，JavaScript可以用于实现表单验证...