当前位置：
  1. 首页
  2. 技术教程
  3. 前端开发教程
  4. 正文

样式表的基本 CSS 属性

前端开发教程 0

我们可以使用 CSS 定义表格的样式。以下属性通常用于设置

及其元素的样式 –

  • border

    CSS border 属性用于定义边框-width、border-style 和 border-color。

  • border-collapse

    此属性用于指定

元素是否应具有共享或单独的边框。

  • caption

    caption-side 属性用于垂直定位表格标题框。

  • empty-cells

    此属性用于指定表格中空单元格的显示。

  • table-layout strong>

    定义浏览器用于布置表格的行、列和单元格的算法。

    • 示例

    以下示例说明了表格的样式 –

     实时演示

    <!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   border: thin solid;
   padding: 5px;
   font-style: italic;
}
caption {
   caption-side: bottom;
}
td {
   box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

    输出

    这给出了以下输出 –

    示例

     现场演示

    <!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
table {
   border: 3px solid black;
}
td {
   border: 3px solid lightgreen;
}
th {
   border: 3px solid lightblue;
}
#t2 {
   border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id=t1>
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>    
</div>
<div>
<table id=t2>
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>

    输出

    这给出了以下输出 –

    以上就是样式表的基本 CSS 属性的详细内容，更多请关注双恒网络其它相关文章！

    上一篇 使用 CSS 构建垂直导航栏
    下一篇 CSS @charset 规则的用法

    相关文章