表格table属性练习

原创 2018-11-25 11:07:31 547
摘要:表格table主要用来罗列数据。table有两个子元素:行<tr>,行内又包含列<td>;2行2列的表格: <table>     <tr>         <td></td>   &nb

表格table主要用来罗列数据。

table有两个子元素:行<tr>,行内又包含列<td>

2行2列的表格:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

1-- 默认表格是没有边框线的。

2--通常需要给表格<table>添加边框(整个表格的外边框)

给宽高100px的2行2列表格加上外边框,css代码:

table{
        width: 100px;
        height: 100px;
        border: 2px solid red;
    }

3--同时其内部单元格<td>也可以加上边框线,宽度可以自适应。

QQ拼音截图20181125102906.png

td {
    border: 2px solid red;
    }


4--我们一般只需要一条边框线,可以通过给table设置样式

border-collapse:collapse;

来合并外边框和单元格的边框。

5--合并单元格:给需要合并的第一个单元格td标签内设置属性;合并行:rowspan=需要合并的行数,合并列:colspan=需要合并的列数。需要注意:应该删除后面表格中被合并的那个/些单元格

QQ拼音截图20181125102728.pngQQ拼音截图20181125103045.png

6--表头用<th>标签设置,注意表头默认字体格式为加粗,居中,无边框线

实例练习:

QQ拼音截图20181125104110.png

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			table {
				border-collapse: collapse;
				width: 300px;
				height: 100px;
				border: 2px solid red;
			}
			
			td,
			th {
				border: 2px solid red;
				text-align: center;
				background-color: lightgoldenrodyellow;
			}
			
			th {
				color: white;
				height: 30px;
				background-color: green;
			}
		</style>
	</head>

	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>年级</th>
			</tr>
			<tr>
				<td>小米</td>
				<td>女</td>
				<td>16</td>
				<td rowspan="2">初二</td>
			</tr>
			<tr>
				<td>小明</td>
				<td>男</td>
				<td>15</td>
			</tr>
		</table>
	</body>

</html>


批改老师:查无此人批改时间:2018-11-25 11:47:21
老师总结:写的很不错,步骤很清晰。table里还有其他的功能也可以试试,少年加油

发布手记

热门词条