HTML表用于在表格中布置表格数据。使用CSS,我们可以通过添加边框,控制表单元格文本对齐,高亮表行等样式HTML表。
我们可以使用border属性为表,表行和表单元格添加边框。
table, th, td {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {<!-- www..cn-->
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr><th>Value</th><th>Item</th></tr>
<tr><td>CSS</td><td>Style</td></tr>
<tr><td>HTML</td><td>Structure</td></tr>
</table>
</body>
</html>
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
其可能的值是折叠或单独。
浏览器在表格周围绘制边框加上每个单元格周围的边框,创建双边框效果。您可以通过应用border-collapse属性解决此问题。
以下代码使用border-collapse属性。
<!DOCTYPE HTML>
<html>
<head>
<style>
table {<!--from www..cn-->
border-collapse: collapse;
}
th, td {
padding: 2px;
}
</style>
</head>
<body>
<table border="1">
<caption>Results of Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 www..cn Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
折叠值告诉浏览器您不想在相邻元素的每个边上绘制边框。
以下代码显示如何比较单独和折叠表边框。
<html>
<body>
<table id="myTable" border="1" style="border-collapse: collapse">
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
</tr><!-- www..cn-->
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
<button onclick="myTable.style.borderCollapse="separate"">separate</button>
<button onclick="myTable.style.borderCollapse="collapse"">collapse</button>
</body>
</html>
width和height属性控制表的宽度和高度。
下面的示例将表的宽度设置为100%,th元素的高度设置为50px:
table {
width: 100%;
}
th {
height: 50px;
}
text-align和vertical-align属性控制表中的文本对齐。
text-align属性设置水平对齐方式,如left,right或center。
vertical-align属性设置垂直对齐方式,如顶部,中间或底部。
td {
text-align: right;
vertical-align: bottom;
}
CSS 图像透明/不透明使用 CSS 很容易创建透明的图像。注意:CSS Opacity 属性是W3C 的 CSS3 建议的一部分。 实例1 - 创建一个透...
很多 CSS 初学者在前端开发过程中,经常会用到CSS虚线样式,但是不知道CSS虚线样式该如何实现,比如一个CSS这样写:border-sty...
HTML事件属性onwheel触发 onwheel 属性事件当鼠标滚轮向上或向下滚动时。HTML5中的新功能 onwheel 属性是HTML5中的新特性。句法e...
font 标签的使用示例如下所示,该标签已经过时,因此我们不建议您使用该标签。实例规定文本的尺寸、字体和颜色:font size="3" c...
h1 - h6 标签用来定义 HTML 标题,表示了 HTML 网页中六个级别的标题。您可以通过下面的这个实例来看看每个级别的标题有什么区别...
keygen 标签已经从 Web 标准中删除。您可以通过下述的实例来大致了解该标签的使用:实例带有 keygen 字段的表单:form action="d...