在转载CSS觉问题及解决办法时看到的这样定义表格边框的方法，如果用表格的border="1"属性定义，实际显示的宽度要比1px粗。所以我直到现在都是定义table的left和top边框，然后定义td的right和bottom边框，这样也用css定义了一个表格的边框。没想到还有这么简单的方法，今天单独摘出来奉献给大家，希望能给您带来帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>定义表格边框的方法</title>
<style>
table{ border-collapse:collapse; }
td{ border:#ccc solid 1px; padding:5px; }
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>今天学了个新方法，奉献给大家</td>
<td>以前都是定义table的上边和左边，然后定义td的右边和下边</td>
<td>没想到还有这么简便的方法，以后就用这个方法了</td>
</tr>
<tr>
<td>我的网络家园</td>
<td>www.htmchina.cn</td>
<td>欢迎大家来访问</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<html>
--------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
#table table {
border-collapse:collapse;
border-right:#ff0000 1px solid;
border-bottom:#ff0000 1px solid;
border-color: #ff0000;
}
#table td {
border-left:#ff0000 1px solid;
border-top:#ff0000 1px solid;
}
</style>
<body style="margin:0">
<br>
方法1：利用亮边框和暗边框[推荐]
<table width="100%" height="100" border="1" bordercolorlight="red" bordercolordark="white" cellpadding="0" cellspacing="0">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>
方法2：利用collapse[推荐]
<table width="100%" height="100" border="1" bordercolor="blue" cellspacing="0" style="border-collapse:collapse">
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
<tr>
<td>www.blueidea.com</td>
<td>www.blueidea.com</td>
</tr>
</table>
方法3：(表格嵌套)
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ff0000">
<tr>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr bgcolor="#ffffff">
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr><tr bgcolor="#ffffff">
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
方法4：(用css实现)
<div id="table">
<table width="100%" border="0" >
<tr>
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
<tr>
<td>极细表格边框</td>
<td>极细表格边框</td>
<td>极细表格边框</td>
</tr>
</table>
</div>
方法5：利用单元格的间距
<table width="100%" height="100" border="0" bgcolor="red" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
<tr>
<td bgcolor="white">www.blueidea.com</td>
<td bgcolor="white">www.blueidea.com</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
与第一个示例相比，这里的表格边框宽度设置为1像素(`border="1"`), 并且使用`bordercolorlight`和`bordercolordark`属性设置了边框的颜色，从而实现了细边框的效果。这里，`bordercolorlight`设置为黑色（`#000000`...
为了增加表格的清晰度和美观性，可以调整单元格间距(cellspacing)，将其设定为1个像素，这样可以在每个单元格之间形成微小的间隙，避免了单元格内容过于紧凑，影响视觉效果。 ```css table { cellspacing: 1; } ``...
在网页设计中，一像素表格（One-Pixel Table）是一种常见的布局技巧，它利用CSS的边框和背景颜色创建出看似只有单个像素宽度的表格，以实现细致的布局效果。这种技术尤其适用于需要精确控制内容对齐和间距的情况。在...
1. **基本表格结构** HTML表格由`<table>`标签开启，`</table>`标签闭合。每个表格内部包含行`<tr>`（table row）和单元格`<td>`（table data）或`<th>`（table header）。例如： ```html 标题1 标题2 ...
1. 1px表格制作：当需要制作1像素宽度的表格时，可以为table或td元素定义边框样式。对于1x1的1px表格，可以使用border: 1px solid teal;实现。对于非1x1的表格，例如2x2，为了防止边框叠加，需要分别为table和td定义...
响应式设计是现代网页开发中的重要概念，它允许网页...通过以上方法，你可以创建出适应不同屏幕尺寸的响应式表格，为用户提供一致且优质的浏览体验。在实际项目中，根据需求和用户反馈进行调整，以优化性能和用户体验。
例如，设置表格边框为1像素，宽度为50%，可以这样写： ```html <table border="1" width="50%"> ... ``` 此外，CSS（层叠样式表）可以提供更多高级定制，如边框样式、颜色、背景色等。通过为`<table>`、`<tr>`、...
根据给定的信息，本文将详细介绍表格边框样式的多种实现方式及其应用场景，旨在为网页...以上就是几种常见的表格边框样式的实现方法。在实际应用中，可以根据具体需求选择合适的边框样式，以达到既美观又实用的效果。
- `border-width`：定义了边框的宽度，这里设为1像素，实现了极细边框的效果。 - `border-style`：定义边框样式，这里设为实线。 - `border-color`：定义边框颜色，这里采用了较浅的颜色以增强视觉效果。 - `...
在Web开发中，表格是一种非常重要的布局工具，用于展示结构化的数据。本教程将深入讲解如何创建表格，以及如何通过CSS来改变表格的背景颜色、字体大小和边框样式，以提升网页的视觉效果。 首先，让我们从HTML表格的...
本文将深入探讨如何仅使用CSS（Cascading Style Sheets）来制作虚线边框的表格，这是一种优雅且灵活的方法，可以提升网页的视觉效果。 首先，让我们了解CSS的基本结构。CSS是一种样式表语言，用于描述HTML或XML...
本篇文章将详细解析“普通table表格样式及代码大全(全)”中的各种表格样式，包括单实线边框、虚线边框、点线边框、双实线边框、槽线边框、脊线边框以及内凹效果边框，帮助你理解和掌握这些基本样式的设计与实现方法...
`将合并单元格边框，而`border-spacing: 5px 10px;`会设置水平和垂直间距。 3. **背景色和文字颜色**：使用`background-color`为表格、行或单元格设置背景色，`color`属性可以改变文本颜色。例如，`background-...
- **`<table width="616" border="1" class="datalist">`**：定义了一个宽度为616像素的表格，并指定了表格边框为1像素以及应用`datalist`类。 - **`<tr>`**：定义表格的一行。 - **`<td width="202" height="70">&...
`将为整个表格添加1像素宽的黑色实线边框。为了分别控制各部分边框，可以使用`border-collapse`属性，将其设置为`collapse`以合并相邻边框，或`separate`保持边框独立。 接着，针对表格的行、列头和数据单元格，...
这将使表格的边框合并，单元格之间有1像素的实线边框，并设置适当的内填充和文字对齐方式。 JavaScript在`javascript.js`文件中可能用于实现更高级的功能，比如动态添加或删除行、排序、过滤数据等。例如，你可以...
例如，`border: 1px solid black;`将创建1像素宽的实线黑色边框。 2. `border-collapse`：此属性决定是否合并相邻边框。设置为`collapse`会使得表格的边框合并，看起来更简洁；而`separate`则保持每个单元格的独立...
border: 1px solid #CCCCCC; }` 可以使用 JavaScript 来控制表格的交互效果，例如： ` function toggleRow(row) { row.style.display = (row.style.display == "none") ? "" : "none"; } </script>` HTML ...
例如，`box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);`表示在元素的右下角添加一个向内偏移2像素，模糊半径为5像素的黑色阴影。 3. **渐变（Gradients）**：使用`linear-gradient`或`radial-gradient`可以创建颜色...