【HTML02】HTML表格语法、细边框实现-附带案例-作业

一、表格table的应用

​ 模拟我们的Excel表格

​ 用来展示批量数据

​ 按照从左到右，从上到下的顺序排列组成

​ 数据保存在单元格里

1、创建表格

​ 定义表格，使用成对的table标签

​ 创建表行，tr

​ 创建单元格，td、th

//表格，有行+单元格组合而成，写的时候要配套写
<table>
    //每写一个tr在，则表示写了一行
    <tr>
    	<td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>爱好</td>
    </tr>
</table>

2、表格常用属性

		table属性：
			-width
			-height
			-align，对齐方式(left,right,center)
			-border
			-cellpadding,设置内边距(单元格边框与内容之间的距离)
			-cellspacing,设置外边框(单元格与单元格之间的距离)
			-bgcolor,表格背景颜色

		tr属性：
			-align,水平对齐方式
			-valign,垂直对齐方式(top,bottom,middle)

		td/th属性：
			-align,水平对齐方式
			-valign,垂直对齐方式(top,bottom,middle)
			-width
			-height
			-colspan,设置单元格跨列
			-rowspan,设置单元格跨行

举例如下：

    <table bgcolor="pink" border="1" width="50%" align="center" cellpadding="10" cellspacing="0"  >
        <!-- //每写一个tr在，则表示写了一行
            tr行的属性
                1. 水平对齐方式
                    align="left|center|right"   
                    默认是居左
                2. 垂直对齐方式
                    valign="top|middle|bottom"
                    默认是居中
                3. 高度
                    height="数值"
                    默认是自适应

         -->
        <tr >
            <!-- td 也有属性
                1. width="百分比|数字"  宽度
                2. height="百分比|数字" 高度
                3. align="left|center|right" 对齐方式
                4. 垂直对齐方式
                    valign="top|middle|bottom"
            
             -->
            <td width="100" align="center">姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>爱好</td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>张三</td>
            <td>18</td>
            <td