HTML Tables-Table Border - 书目录

HTML Tables-Table Border

Table Border

本页演示如何在网页和其他HTML文档中设置表格边框。

在HTML中,有两种方法为表格添加边框。首先是使用HTML border属性。另一个是使用CSS。

以下是在HTML中应用表格边框的一些示例。

HTML表格边框

通过使用HTML border属性,您可以在表格周围获得快速边框。您可以使用数字确定边框的宽度。例如,对于薄边框,请使用数字“1”。对于较粗的边框,请使用更大的数字。

喜欢这个:

<table border="1">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

正如你所看到的,这是获得表格边界的一种快捷方式,但实际上并没有任何控制边框的方式。它看起来的方式将取决于用户的浏览器,您将无法更改它。除非…

如果你想改变你的表格边框的样子,你可以使用CSS。CSS允许您更改表格边框的颜色,宽度和样式。

使用CSS,您可以使用该border属性来定义表格边框。您可以将此属性应用于整个表格或每个单元格(或单个单元格,如果这是您更喜欢的)。

下面的例子。

CSS表格边框

将CSS边框代码应用于表格元素(即<table>标签)时,边框只出现在实际表格的周围 – 而不是单个单元格。

喜欢这个:

<table style="border:1px solid black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

您还可以将边框样式更改为粗体,虚线,虚线或CSS可理解的任何内容。你也可以改变它的颜色。这里有一些例子:

<table style="border:1px dotted black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>
<table style="border:1px dashed black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>
<table style="border:3px dashed blue;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>
<table style="border:5px double black;">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

表单元格边框

对于表格中的表格单元格,您需要对各个表格单元格应用边框代码。

在下面的例子中,我已经对表格单元格和表格标题单元格应用了边框。我还在桌子周围应用了不同的彩色边框(就像我在前面的例子中那样)。不同的颜色将有助于区分表格边框和单元格边框:

<table style="border:1px solid black;">
<tr>
<th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td>
</tr>
</table>

边界collapse

您可以使用CSS border-collapse属性删除不同边框之间的空间。您可以将此属性应用于HTML表格元素。

当你对表格元素应用这个时,你会注意到表格边框简单地消失了,或者“折叠”了。您还会注意到单元之间的空间也崩溃了。

例:

<table style="border:1px solid black;border-collapse:collapse;">
<tr>
<th style="border:1px solid red;">Table Header</th><th style="border:1px solid red;">Table Header</th>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 1</td><td style="border:1px solid red;">Table cell 2</td>
</tr>
<tr>
<td style="border:1px solid red;">Table cell 3</td><td style="border:1px solid red;">Table cell 4</td>
</tr>
</table>

使用CSS类

如果您熟悉HTML和CSS,那么您可能会了解CSS类的好处。CSS类允许您将所有样式设置在一个位置,而不是在您编码时将它们添加到每个HTML元素。这节省了编码时间和维护您网站的时间。它还减少了错误的可能性,有助于下载时间,并有助于保持代码的美观和干净。

以下是使用嵌入式样式表来定义HTML表格边框的示例。请注意,样式设置在开始和结束<syle>标签之间。

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myTable { background-color:#eee;border-collapse:collapse; }
.myTable th { background-color:#000;color:white;width:50%; }
.myTable td, .myTable th { padding:5px;border:1px solid #000; }
</style>
<!-- End Styles -->
<table class="myTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

另一个例子

以下是在您的HTML表格周围使用CSS边框的更多示例。

<!-- Start Styles. Move the 'style' tags and everything between them to between the 'head' tags -->
<style type="text/css">
.myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.myOtherTable th { background-color:#BDB76B;color:white;width:50%; }
.myOtherTable td, .myOtherTable th { padding:5px;border:0; }
.myOtherTable td { border-bottom:1px dotted #BDB76B; }
</style>
<!-- End Styles -->
<table class="myOtherTable">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>
133791

 

英语原文:http://www.html.am/html-codes/tables/table-border.cfm 由工具自动翻译,由书目录整理