【温故知新】HTML学习笔记（表格）

表格Table

用来处理和显示数据。
学习要求：能手写表格结构，能合并单元格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
</head>
<body>
    <table width="500" border="1">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>电话</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>男</td>
            <td>1391591236</td>
        </tr>
        <tr>
            <td>小金</td>
            <td>女</td>
            <td>15863251122</td>
        </tr>
    </table>
</body>
</html>

<table>里面只能装<tr>（代表行），<tr>里面只能装<td>（代表单元格）。
table的常用属性：

border：表格的边框（默认为border=“0”无边框）；
cellspacing：单元格与单元格边框之间的空白间距（默认2像素）；
cellpadding：单元格内容与单元格边框之间的空白间距（默认1像素）；
width：表格的宽度（像素值）；
height：表格的高度（像素值）；
align：表格在网页中的水平对齐方式（left、center、right）；

注意→正常三参为0：border、cellspacing、cellpadding设置为0

表头标签

<th> </th> 即表头单元格，一般用于第一行或者第一列，其文本加粗居中。

	<table width="500" border="1" align="center" cellspacing="0" cellpadding="10">
		<tr>
			<th>姓名</th>
			<th>性别</th>
			<th>电话</th>
		</tr>
		<tr>
			<td>小王</td>
			<td>男</td>
			<td>1391591236</td>
		</tr>
		<tr>
			<td>小金</td>
			<td>女</td>
			<td>15863251122</td>
		</tr>
	</table>

表格标题

    <table>
        <caption>个人信息表</caption>
    </table>

caption标签必须紧随table标签之后（只存在表格里面），只能对每个表格定义一个标题。

表格结构

头部：<thead> </thead>
主题：<tbody> </tbody>

合并单元格

跨行合并：rowspan 合并为列
跨列合并：colspan 合并为行

合并顺序：自上而下，先左后右。
删除的个数 = 合并的个数 - 1。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table  width="400" height="100" border="1">  
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td> 
        </tr>
        <tr>
            <td>AA</td>
            <td>BB</td>
            <td>CC</td> 
        </tr>
        <tr>
            <td>AA</td>
            <td colspan="2">BB</td>
            <!-- <td>CC</td> -->
        </tr>
    </table>

</body>
</html>

SAP剑客

发布了2002 篇原创文章 · 获赞 3892 · 访问量 1021万+

他的留言板关注

【温故知新】HTML学习笔记（表格）

猜你喜欢