004 认识HTML列表和表格

004 认识HTML标签 列表 和 表格

列表

1 列表标签 是一个块级标签 嵌套标签的组合

2 列表标签 分为无序列表 和有序列表

3 无序列表使用 ul 标识，嵌套li

4 有序列表使用 ol 标识，嵌套li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<p>无序列表 解释 </p>
<!--不同的属性 在ui显示的也是不同 在html 中 了解即可 -->
<ul type="square">
    <li>张三</li>
    <li>李四</li>
</ul>

<ul type="circle">
    <li>张三</li>
    <li>李四</li>
</ul>

<p>有序列表 解释</p>

<ol>
     <li>李四</li>
     <li>王五</li>
</ol>

</body>
</html>

5列表标签的特性

仅对列表的属性 进行了调整。
一般使用css 针对样式操作
image-20230209131752139 image-20230209133619940

表格

1 表格标签 是一个块级标签 嵌套标签的组合

2 表格标签使用 table tr 嵌套 td

表格标签 table 
tr + td 分别代表行和列 
两个标签进行组合在一个大的平面

table的属性是对于整个一个表格显示的效果  borber显示边框 居中 背景颜色等

tr行嵌套td列 ，行和列中的合并属性 rowspan colspan
单独的行和列 针对于 边框 颜色 合并 计算等等

具体的样式需要css 进行处理

3 表格标签的特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1" >
<!--    border的属性值是边框的宽度，默认是0，不显示边框-->
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>01</td>
        <td>张三</td>
        <td>20</td>
    </tr>
    <tr>
        <td>02</td>
        <td>李四</td>
        <td>22</td>
    </tr>
</table>


<table border="1" >

    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>部门</td>
    </tr>
    <tr>
        <td>01</td>
        <td>张三</td>
        <td rowspan="2">开发</td>
<!--        单元格合并行 还是合并列的问题 rowspan 合并行的意思 -->
    </tr>
    <tr>
        <td>02</td>
        <td>李四</td>

    </tr>
</table>

</body>
</html>
image-20230209151107535

西线表格

1 西线表格 是一个块级标签

2 西线表格使用h标识

3 西线表格的特性

使用  thead 包裹表头
使用  tbody 包裹数据部分

<!-- 表格标签 -->
<!--表头  序号 姓名 年龄 地址-->
<!--table>tr*3 算上表头和内容 要创建几行   -->
<!--      td 代表有几列的意思 要在行的标签内加入 -->
<!--表格的属性  边框 border
              width 宽度
              hight 高度
              对齐   左中右  水平方向移动
              默认左对齐  left
              右对齐align="right"
              居中 align="center"

     列 或者 行 可以调整位置的长 和 宽

     也可以定义一个单元格的显示
             单元格大小 设置
             内容显示的位置 左 居中 右

     表格的细线的显示
            cellspacing="20" 外边距 单元格和表格之间的距离
            cellpadding="20" 内边距  单元格和单元之间的距离

      外边框 cellspacing="0"

-->
<table bgcolor="aqua" border="0" ; cellspacing="1" ; cellpadding="1" >
    <tr bgcolor=white>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
    <tr bgcolor=white>
        <td>1</td>
        <td>张三</td>
        <td>19</td>
        <td>北京</td>
    </tr>
    <tr bgcolor=white>
        <td>2</td>
        <td>李四</td>
        <td>20</td>
        <td>上海</td>
    </tr>
    <tr bgcolor=white>
        <td>3</td>
        <td>王五</td>
        <td>30</td>
        <td>广州</td>
    </tr>
</table>
```




####  表头的标题 

```
<table  border="1"  cellpadding="0"  cellspacing="0">
    <caption>人员信息汇总表</caption>  # 表头的信息 

    <thead >  # thead  表格的第一行的内容的标签的格式 
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </thead>
    <tr >
        <td rowspan="2">1</td>
        <td rowspan="2">张三</td>
        <td rowspan="2">19</td>
        <td rowspan="2">北京</td>
    </tr>
</table>
```

####  表尾的标题 

```
<table  border="1"  cellpadding="0"  cellspacing="0">
    <caption>人员信息汇总表</caption>

    <thead >
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
    </thead>
    <tr >
        <td rowspan="2">1</td>
        <td rowspan="2">张三</td>
        <td rowspan="2">19</td>
        <td rowspan="2">北京</td>
    </tr>

<!--    表尾的内容-->
    <tfoot>  
        <td>统计</td>
        <td>2</td>
        <td>100</td>
        <td>2</td>

    </tfoot>

</table>
posted @ 2023-02-09 15:32  mmszxc  阅读(55)  评论(0)    收藏  举报