Web学习-HTML（二）

web学习-HTML（二）

一、表格 (table)

1.表格的使用

    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>成绩</td>
        </tr>

        <tr>
            <td>张三</td>
            <td>18</td>
            <td>92</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>20</td>
            <td>99</td>
        </tr>

        <tr>
            <td>王五</td>
            <td>16</td>
            <td>87</td>
        </tr>

    </table>

效果图

table : 代表表格，可以理解为整个界面
tr : 代表每一行，（张三 18 92）即为一行
td : 代表每一个单元格，（张三或 18 或 92）都代表一个单元格
单元格标签td中不仅可以放置文字，也可以放置链接或者图片

<td><a href="http://baidu.com">百度</a></td>
<td><image src="image.png"></td>

值得注意的是：在表格中没有列的概念！

2.表格属性

有部分属性不常用，这里主要记住第二个和第三个属性

属性图解

<table border="1" width="500" align="center" height="200" cellspacing="10" cellpadding="20">

3.表头单元格标签（th）

<table border="1" width="500" align="center" height="200" cellspacing="0" cellpadding="20"> <tr> <th>姓名</th> <th>年龄</th> <th>成绩</th> </tr> <tr> <td>张三</td> <td>18</td> <td>92</td> </tr> <tr> <td>李四</td> <td>20</td> <td>99</td> </tr> <tr> <td>王五</td> <td>16</td> <td>87</td> </tr> </table>

效果：

表头单元格一般用于表格中的第一行或者第一列，效果是文字居中且加粗

4.表格标题标签

<table> <caption>我是这个表格的标题</caption> </table>

效果:

表格标题通常会被居中，且位于表格之上
caption标签只有用在table标签中才有意义

5.合并单元格

5.1：合并单元格的两种形式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

5.2：合并单元格的顺序

合并单元格是按照先上后下，先左后右的顺序

5.3：合并单元格的方法

先确定是跨行还是跨列合并

根据先上后下先左后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量比如： <td rowspan="2"> </td>

删除多余的单元格单元格

<table border="1" width="500" height="200" align="center" cellspacing="0"> <caption> 个人介绍 </caption> <tr> <td>张三</td> <td>男</td> <td>16</td>  <td rowspan="2">照片</td> </tr> <tr> <td>身高 178</td> <td>满族</td> <td>未婚</td>  </tr> <tr> <td>个人简介</td>  <td colspan="3">我很厉害</td>  </tr> <tr> <td>获得荣誉</td> <td colspan="3">荣誉墙</td>  </tr> </table>

效果：

个人公众号