2.9CSS table属性

最新推荐文章于 2024-01-11 08:13:56 发布

kento_joyasa

最新推荐文章于 2024-01-11 08:13:56 发布

阅读量1.3k

点赞数 2

分类专栏： h5&&c3 文章标签： css 前端 html

本文链接：https://blog.csdn.net/beloved_yu/article/details/127528521

版权

h5&&c3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		table,
		th,
		td {
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
		</tr>
		<tr>
			<td>Peter</td>
			<td>Griffin</td>
		</tr>
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
		</tr>
	</table>
</body>

</html>

这个表格有双边框，是因为th和td有独立的边界

为了显示一个表的单个边框，使用border-collapse属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        table {
            border-collapse: collapse;
        }

        table,
        td,
        th {
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
        </tr>
    </table>

    <p><b>注意：</b> 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。</p>

</body>

</html>

表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		table,
		td,
		th {
			border: 1px solid black;
		}

		table {
			width: 100%;
		}

		th {
			height: 50px;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Savings</th>
		</tr>
		<tr>
			<td>Peter</td>
			<td>Griffin</td>
			<td>$100</td>
		</tr>
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
			<td>$150</td>
		</tr>
		<tr>
			<td>Joe</td>
			<td>Swanson</td>
			<td>$300</td>
		</tr>
		<tr>
			<td>Cleveland</td>
			<td>Brown</td>
			<td>$250</td>
		</tr>
	</table>
</body>

</html>

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心：

垂直对齐：vertical-align： top， bottom center

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		table,
		td,
		th {
			border: 1px solid black;
		}

		td {
			height: 50px;
			vertical-align: bottom;
		}
	</style>
</head>

<body>
	<table>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Savings</th>
		</tr>
		<tr>
			<td>Peter</td>
			<td>Griffin</td>
			<td>$100</td>
		</tr>
		<tr>
			<td>Lois</td>
			<td>Griffin</td>
			<td>$150</td>
		</tr>
		<tr>
			<td>Joe</td>
			<td>Swanson</td>
			<td>$300</td>
		</tr>
		<tr>
			<td>Cleveland</td>
			<td>Brown</td>
			<td>$250</td>
		</tr>
	</table>
</body>

</html>

kento_joyasa

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
2.9CSS table属性

垂直对齐：vertical-align： top， bottom center。为了显示一个表的单个边框，使用border-collapse属性。Width和height属性定义表格的宽度和高度。这个表格有双边框，是因为th和td有独立的边界。指定CSS表格边框，使用border属性。表格中的文本对齐和垂直对齐属性。
复制链接

扫一扫