表格、列表

一、创建表格

1、基本语法：

<table>

        <tr> 

            <td>单元格内的文字</td>

            …

        </tr>

　　     …

</table>

①table用于定义一个表格标签。

②tr标签用于定义表格中的行，必需嵌套在table标签中。

③td 用于定义表格中的单元格，必需嵌套在<tr></tr>标签中。

④字母他 td 指表格数据（table date），即单元格的内容

2、总结

①表格的主要目的是用来显示特殊数据的。

②一个完整的表格有表格标签（table）、行标签(tr)、单元格标签（td）组成，没有列标签。

③<tr></tr>中只能嵌套<td></td>类的单元格。

④<td></td>标签，它就像一个容器，可以容纳所有的元素。

2、表格属性（重点记住cellspacing、cellpadding）

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

 

 

 

 

 

 

 

 

 

 

 

 

①我们经常有个说法，是三参为0，平时开发的我们这三个参数 border、cellspacing、cellpadding为0。

3、表头单元格标签th

①作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中；

②语法：只需要用表头标签<th></th>替代相应的单元格标签<td></td>即可；

③表头：即表格的第一行和第一列

4、表格标题标签caption

⑴定义和用法：

 <table>

        <caption>我是表格标题</caption>

    </table>

⑵注意：①captain元素定义表格标题，通常这个标题会被居中且显示于表格之上；

　　　　②captain标签必需紧随 table 标签之后；

　　　　③这个标签只存在表格里才有意义。

5、合并单元格（难点）

⑴合并单元格的2种方：①跨行合并：rowspan=“合并单元格的个数”；

    　　　　　　　　　  ②跨列合并：colspan=“合并单元格的个数”。

⑵合并单元格顺序：先上，后下·，先左，后右

⑶合并单元格三部曲：①先确定是跨行还是跨列合并；

　　　　　　　　　　②根据先上，后下·，先左，后右的原则找到目标单元格，然后写上合并方式，还有要合并的单元格数量

　　　　　　　　　　　如：<td colspan="3"></td>

　　　　　　　　　　③删除多余的单元格

 6、拓展（表格划分结构 了解）

⑴语义：对于较复杂的表格，表格的结构也就相对的复杂了，所有又将表格分割成三个部分：题头、正文、脚注，而这三个部分分别用：

thead、tbody、tfoot 来标注，这样更好分清表格结构。

⑵①<thead></thead>:用于定义表格的头部，用来放标题之类的东西，<thead>内部必需拥有<tr>标签；

    ②<tbody></tbody>:用于定义表格的主体，放数据本体；

    ③<tfoot></tfoot>放表格的脚注之类；

④以上标签都是放在 table 标签里面。

二、列表标签

1、列表

①作用：列表是用来布局的，因为非常整齐、自由；

②概念：容器里面载着结构、样式一致的文字或图表的一种形式，叫列表；

③特点：整齐、整洁、有序，跟表格类似，但是它的可组合自由度会更高。

2、无序列表 ul（重点）⭕

⑴概念：无序列表的各个列表项之间没有顺序级别之分，是并列的。

⑵基本语法格式：

 <ul>

        <li>列表项1</li>

        <li>列表项2</li>

        <li>列表项3</li>

        ……

    </ul>

⑶总结：①<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；

　　　　②<li>与</li>之间相当于一个容器，可以容纳所有元素(其他标签）；

　　　　③无序列表会带有自己样式属性，放下那个样式，一会让css来。

3、有序列表 ol（了解）

⑴概念：有序列表即为有排列顺序的列表，其各个列表项按照一定顺序排列定义；

⑵基本语法格式：

 <ol>

        <li>列表项1</li>

        <li>列表项2</li>

        <li>列表项3</li>

        ……

    </ol>

⑶所有特征基本与ul一致，但是实际中比无序列表用的少很多。

4、自定义列表（理解）

⑴概念：自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号；

⑵基本语法格式：

    <dl>

        <dt>名词1</dt>

        <dd>名词1解释1</dd>

        <dd>名词1解释2</dd>

        …

        <dt>名词2</dt>

        <dd>名词2解释1</dd>

        <dd>名词2解释2</dd>

        …

    </dl>

 ⑶ dd 和 dt 是并列关系