HTML列表和表格标签

WH牛

已于 2024-06-13 17:12:38 修改

阅读量850

点赞数 14

分类专栏：前端文章标签： html 前端 javascript

于 2024-06-13 17:03:30 首次发布

本文链接：https://blog.csdn.net/WHabc2002/article/details/139653426

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.列表标签

1.1无序列表

<ul>: [type 属性： disc( 实心圆点 )( 默认 ) 、 circle( 空心圆圈 ) 、 square( 实心方块 )]

<li>: 列表中的每一项

Emment语法：ul>li*3


<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

对于属性的表现展示：

1. disc( 实心圆点 )( 默认 )

代码：

显示效果：

2. circle(空心圆圈)

代码：

显示效果：

3. square(实心方块)

代码：

显示效果：

1.2有序列表

Emment语法：ol>li*3

<ol>
   <li></li>
   <li></li>
   <li></li>
</ol>

1.代码：

显示效果：

如果你想要从特定的序号开始

2.代码：

显示效果：

无序和有序也可以嵌套

3.代码：

显示效果：

1.3定义列表

实现问答和解释的效果，dd有默认缩进的效果

Emment语法：dl>dt+dd

   <dl>
    <dt></dt>
    <dd></dd>
   </dl>

代码：

显示效果：

2. 表格标签

table 标签 : 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格 . 会居中加粗

thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 )

tbody: 表格得到主体区域 .

caption:表格的标题

Emment语法：table>(tr>th*3)*4

   <table>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
   </table>

接下来我们逐一添加属性（因为我们只是看看添加属性后的效果，就不分表头和表身了）

2.1表格标签的属性

代码：

显示效果：

1.border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框

2.width / height: 设置尺寸

3.cellspacing: 单元格之间的距离. 默认为 2 像素，cellpadding: 内容距离边框的距离, 默认 1 像素

2.2合并单元格

1.跨行合并 : rowspan="n"

2.跨列合并 : colspan="n"

步骤

1. 先确定跨行还是跨列

2. 找好目标单元格 ( 跨列合并 , 左侧是目标单元格 ; 跨行合并 , 上方是目标单元格 )

3. 删除的多余的单元

代码：

 <table align="center" border="10" cellpadding="20" cellspacing="0" width="500"height="500">
    <tr>
         <td>姓名</td>
         <td>性别</td>
         <td>年龄</td>
    </tr>
     <tr>
         <td>张三</td>
         <td colspan="2">男</td>
    </tr>
    <tr>
         <td>李四</td>
         <td>女</td>
         <td>11</td>
    </tr>
 </table>

显示效果：