table

最新推荐文章于 2024-09-23 19:49:13 发布
最新推荐文章于 2024-09-23 19:49:13 发布
阅读量223 收藏 1
点赞数 1
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nihaomingtian123/article/details/50039453
版权
重要标签
一.文本标签
1.标题标签<hi></hi>1到6，h1最大，h6最小

2.文本控制标签
(1)<font></font>
size：大小，size加减一个数字，是在默认的大小上加减（默认的和三号字差不多大）。color：颜色
                
   
   
  1. 
     
              <font color="red" >博看文思1</font>
    
    
    
    
    
    
     
      <font color="red" size="3">博看文思2</font>
    
    
    
    
    
    
     
      <font color="red" size="+1">博看文思3</font>
    
    
    
    
    
    
     
      <font color="red" size="-1">博看文思4</font>

                
(2)<em></em> 输出需要强调的文本（斜体加黑体）
               
  
  
  1. 
    
      <div><em>博看文思</em></div>

  (3) <b></b> 加粗
                
  
  
  1. 
    
     <div><b>博看文思</b></div>
                
(4)<p></p>段落标签,可以使用align用来说明对齐方式
<!--p元素--> 
   
   
  1. 
     
     <p align="center" style="border:solid 1px red">博看文思</p>
    
    
    
    
    
    
     
      <div align="center" style="border:solid 1px red">博看文思</div>
    
    
    
    
    
    
     
      <div align="center" style="border:solid 1px red">博看文思</div>
<p></p>与<div></div>的区别，<p>元素会换行，<div>不会
                
(5)<br />结束标签，单标记，回车换行

                  
  
  
  1. 
    
      <span>博看文思1</span><span>博看文思2</span>


                    

加上<br />换行之后
                    
  
  
  1. 
    
     <span>博看文思1</span><br /><span>博看文思2</span>

                    
（6）普通列表标签<dl></dl>定义列表
<dt></dt><dd></dd>

                    
   
   
  1. 
     
      <!--定义列表<dl></dl>-->
    
    
    
    
    
    
     
      <dl>
    
    
    
    
    
    
     
      <dt>水果</dt>
    
    
    
    
    
    
     
      <dd>苹果</dd>
    
    
    
    
    
    
     
      <dd>香蕉</dd>
    
    
    
    
    
    
     
      <dt>蔬菜</dt>
    
    
    
    
    
    
     
      <dd>茄子</dd>
    
    
    
    
    
    
     
      <dd>辣椒</dd>
    
    
    
    
    
    
     
      <dt>酒水</dt>
    
    
    
    
    
    
     
      <dd>白酒</dd>
    
    
    
    
    
    
     
      <dd>红酒</dd>
    
    
    
    
    
    
     
      </dl>

                    
                    
  
  
  1. 
    
     有序列表<ol></ol>
   
   
    
   
   
    
    
                        <!--有序列表<ol></ol>-->
   
   
    
   
   
    
    
     <ol>
   
   
    
   
   
    
    
     <li>张三</li>
   
   
    
   
   
    
    
     <li>李四</li>
   
   
    
   
   
    
    
     <li>王五</li>
   
   
    
   
   
    
    
     <li>钱六</li>
   
   
    
   
   
    
    
     </ol>


                    

                 
  
  
  1. 
    
       <!--无序列表<ul></ul>-->
   
   
    
   
   
    
    
     <ul>
   
   
    
   
   
    
    
     <li>张三</li>
   
   
    
   
   
    
    
     <li>李四</li>
   
   
    
   
   
    
    
     <li>王五</li>
   
   
    
   
   
    
    
     <li>钱六</li>
   
   
    
   
   
    
    
     </ul>

                    
                    
  
  
  1. 
    
     <!--有序列表变无序<ol></ol>-->
   
   
    
   
   
    
    
     <ol style="list-style-type:disc">
   
   
    
   
   
    
    
     <li>张三</li>
   
   
    
   
   
    
    
     <li>李四</li>
   
   
    
   
   
    
    
     <li>王五</li>
   
   
    
   
   
    
    
     <li>钱六</li>
   
   
    
   
   
    
    
     </ol>
   
   
    
  
  

  
  
  1. 
    
    <!--无序列表变有序<ul></ul> style="list-style-type:decimal" 可以改变样式，none：什么都没有，square：方块
   
   
    
   
   
    
    
     -->
   
   
    
   
   
    
    
     <ul style="list-style-type:decimal">
   
   
    
   
   
    
    
     <li>张三</li>
   
   
    
   
   
    
    
     <li>李四</li>
   
   
    
   
   
    
    
     <li>王五</li>
   
   
    
   
   
    
    
     <li>钱六</li>
   
   
    
   
   
    
    
     </ul>

                        
  
  
  1. 
    
     <!--设为none时，一定要把margin:0px;padding:0px;-->
   
   
    
   
   
    
    
     <ol style="list-style-type:none;margin:0px;padding:0px;">
   
   
    
   
   
    
    
     <li>张三</li>
   
   
    
   
   
    
    
     <li>李四</li>
   
   
    
   
   
    
    
     <li>王五</li>
   
   
    
   
   
    
    
     <li>钱六</li>
   
   
    
   
   
    
    
     </ol>

                        
（7）图片标签<img />
                        <!--image属性-->
<img src="images/111.png" />

                          
                        <!--image属性-->
<img src="images/1.png" alt="请重新查看路径是否正确"/>

                            图片名字不正确
                            
 
   
   
  1. 
     
      
    
    
    
    
    
    
     
       <!--image属性 src:路径 alt: 图片加载不出来时，提示作用title: 这张图片是什么。width：宽. height:  高 .border:边框-->
    
    
    
    
    
    
     
      <!--
    
    
    
    
    
    
     
      <img src="images/111.png" 
    
    
    
    
    
    
     
      alt="请重新查看路径是否正确"
    
    
    
    
    
    
     
      title="这是我的桌面"
    
    
    
    
    
    
     
      width="420"
    
    
    
    
    
    
     
      height="500"
    
    
    
    
    
    
     
      border="1"/>
    
    
    
    
    
    
     
      -->
    
    
    
    
    
    
     
                                 <img src="images/111.png" 
    
    
    
    
    
    
     
      alt="请重新查看路径是否正确"
    
    
    
    
    
    
     
      title="这是我的桌面"
    
    
    
    
    
    
     
      style="width:420px;
    
    
    
    
    
    
     
      height:500px;
    
    
    
    
    
    
     
      border:solid 1px red;
    
    
    
    
    
    
     
      padding:3px;"/>

                                
（8）水平线<hr />
                                <!--<hr>水平线--> 
  
  
  1. 
    
                <hr size="3" 
   
   
    
   
   
    
    
     width="200px"
   
   
    
   
   
    
    
     color="red"/>

                            
                        <hr>常用于一个东西的后面
                         
  
  
  1. 
    
                 <div>通知</div>
   
   
    
   
   
    
    
     <hr size="3" 
   
   
    
   
   
    
    
     width="200px"
   
   
    
   
   
    
    
     color="red"
   
   
    
   
   
    
    
     align="left"/>

                            
  （9）表格元素<table></table>         

                        
  
  
  1. 
    
      <!--表格元素<table></table>  -->
   
   
    
   
   
    
    
     <table width="100%"
   
   
    
   
   
    
    
     border="1" 
   
   
    
   
   
    
    
     cellpadding="0"
   
   
    
   
   
    
    
     cellspacing="0">
   
   
    
   
   
    
    
     <tr bgcolor="lightblue">
   
   
    
   
   
    
    
     <th><font color="white">第一列</font></th>
   
   
    
   
   
    
    
     <th><font color="white">第二列</font></th>
   
   
    
   
   
    
    
     <th><font color="white">第三列</font></th>
   
   
    
   
   
    
    
     </tr>
   
   
    
   
   
    
    
     <tr>
   
   
    
   
   
    
    
     <td align="center">1-1</td>
   
   
    
   
   
    
    
     <td align="center">1-2</td>
   
   
    
   
   
    
    
     <td align="center">1-3</td>
   
   
    
   
   
    
    
     </tr>
   
   
    
   
   
    
    
     <tr>
   
   
    
   
   
    
    
     <td align="center">2-1</td>
   
   
    
   
   
    
    
     <td align="center">2-2</td>
   
   
    
   
   
    
    
     <td align="center">2-3</td>
   
   
    
   
   
    
    
     </tr>
   
   
    
   
   
    
    
     <tr>
   
   
    
   
   
    
    
     <td align="center">3-1</td>
   
   
    
   
   
    
    
     <td align="center">3-2</td>
   
   
    
   
   
    
    
     <td align="center">3-3</td>
   
   
    
   
   
    
    
     </tr>
   
   
    
   
   
    
    
     </table>

                          
跨行：rowspan=" "
跨列：colspan = " "       
                  
  
  
  1. 
    
      <!DOCTYPE html>
   
   
    
   
   
    
    
    <html lang="en">
   
   
    
   
   
    
    
    <head>
   
   
    
   
   
    
    
     <meta charset="UTF-8">
   
   
    
   
   
    
    
     <meta charset="UTF-8">
   
   
    
   
   
    
    
     <title>Document</title>
   
   
    
   
   
    
    
    </head>
   
   
    
   
   
    
    
    <body>
   
   
    
   
   
    
    
     <table border="1">
   
   
    
   
   
    
    
     <tr>
   
   
    
   
   
    
    
     <th rowspan="3">1-1</th>
   
   
    
   
   
    
    
     <th>1-2</th>
   
   
    
   
   
    
    
     <th>1-3</th>
   
   
    
   
   
    
    
     </tr>
   
   
    
   
   
    
    
     <tr>
   
   
    
   
   
    
    
     
   
   
    
   
   
    
    
     <td>2-2</td>
   
   
    
   
   
    
    
     <td>2-3</td>
   
   
    
   
   
    
    
     </tr>
   
   
    
   
   
    
    
     <tr>
   
   
    
   
   
    
    
     
   
   
    
   
   
    
    
     <td>3-2</td>
   
   
    
   
   
    
    
     <td>3-3</td>
   
   
    
   
   
    
    
     </tr>
   
   
    
   
   
    
    
     </table>
   
   
    
   
   
    
    
    </body>
   
   
    
   
   
    
    
    </html>
   
   
    
   
   
    
    
                       


                           
  
  
  1. 
    
     <td align="center">你好</td>//使单元格中的内容“你好”居中
   
   
    
   
   
    
    
                            <table width="100%"
   
   
    
   
   
    
    
     border="1" 
   
   
    
   
   
    
    
     cellpadding="0"
   
   
    
   
   
    
    
     cellspacing="0">
   
   
    
   
   
    
    
                        Cellpadding 来创建单元格内容与其边框之间的空白
   
   
    
   
   
    
    
                        Cellspacing 增加单元格之间的距离。
给table中的文字居中用:
 
<table style="text-align:center ">
使table居中用:
<table align="center"></table>
nihaomingtian123
关注
专栏目录
Bootstrap table
12-06
Bootstrap Table 是一个基于流行的前端框架Bootstrap开发的轻量级表格组件。它为开发者提供了一种简单而高效的方式来创建功能丰富的表格，包括固定表头、单选或多选、数据排序、分页以及自定义表头等特性。这个插件...
uni-app table表格
10-26
在uni-app框架中，`table`组件是一种用于展示数据的常用元素，尤其在处理列表或者表格数据时。uni-app是一个跨平台的前端开发框架，它允许开发者使用Vue.js语法编写代码，一次编写，多端运行，包括iOS、Android、H5...
用于layui table 自定义列
07-06
其中，layui table是layui框架中的一个核心组件，用于展示数据表格。本教程将深入探讨如何利用layui table实现自定义列，以及如何保存和应用这些自定义模板。 一、layui table组件基础 layui table组件提供了灵活...
pl-table示例代码
06-29
`pl-table`是一个用于创建可定制化表格的前端组件，常在Web开发中用于数据展示。这个组件提供了丰富的功能和自定义选项，使得开发者能够轻松地构建交互式、响应式的表格。下面我们将深入探讨`pl-table`的相关知识点...
Bootstrap table使用方法记录
08-29
Bootstrap Table 使用方法记录 Bootstrap Table 是一个基于 Bootstrap 框架的表格插件，提供了丰富的表格样式和交互功能。本文将详细介绍 Bootstrap Table 的使用方法，包括基本使用、样式定制、事件处理等方面的...
html知识点框架
爱敲代码的卡拉米的博客
09-18 1061
一、HTML基础
python：基于django的html订单提交页面
我是你大爷
09-23 480
这里给出一个基于django的html订单提交页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能。
【html】基础（一）
小小unicorn的博客
09-23 1106
【html】基础（一）
实现HTML两栏布局
最新发布
weixin_45596561的博客
09-23 150
是一个弹性单位，代表“分数”，它会根据剩余空间的比例来分配宽度。：表示第二列会占据剩余的所有空间。浮动 + margin。
HTML超文本链接标签及其属性
m0_74742670的博客
09-17 256
HTML使用<a> </a>标签来设置超文本链接，超文本链接可以是一个字，一个词，或者一组词，也可以是一张图片，你可以点击这些内容跳转到新的文档或当前文档的某个部分。注意：在默认情况下，一个未访问的链接会显示蓝色字体并带有下划线，一个访问过的链接会显示紫色字体并带有下划线，点击链接时会显示红色字体并带有下滑线。在使用<a>标签时需要使用href属性来描述链接的地址。
HtmlRender - c++实现的html生成类
tinga_kilin的博客
09-17 472
基于c++实现的一个便捷、规范的html生成类，允许通过html标签、标签参数、标签内容、任意嵌套子元素等生成一段html文本
在HTML中添加图片
Q18600000000的博客
09-15 729
标签中指定要显示的图像
邮件发送高级功能详解：HTML格式、附件添加与SSL/TLS加密连接
这家伙很懒，什么都没有留下
09-23 779
通过本文的介绍，我们详细了解了邮件发送中的高级功能：HTML格式设置、附件添加以及SSL/TLS加密连接。这些功能不仅提高了邮件的可读性和实用性，还保障了邮件传输的安全性。随着技术的不断进步和网络安全威胁的日益严峻，未来邮件发送技术将更加注重用户体验和数据安全。对于新手朋友来说，掌握这些高级功能将大大提升邮件沟通的效率和质量。建议在实际应用中多尝试、多实践，结合具体场景和需求灵活运用这些功能。同时，也要关注邮件服务商的最新动态和技术更新，以便及时了解和利用最新的邮件发送技术。
HTML Form表单
m0_74742670的博客
09-18 548
表单在Web网页中用来给用户填写信息，从而能采用用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册等。表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些叫做控件，表单就是容器，它能狗容纳各种各样的控件。
jspdf踩坑 htmltocanvas
bs521521的博客
09-20 296
解决方案是换到jspdf.js目录里。
web基础：域名、网页、HTML、web版本
shyuu的博客
09-23 920
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
python：基于django的html二维码页面生成功能页面
我是你大爷
09-23 256
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
HTML元素居中
weixin_45596561的博客
09-23 180
⾏内元素⽔平垂直居中 设置⽗级标签。⽔平居中： text-align: center 垂直居中： line-height：盒⼦⾼度。绝对定位 + 四个方向 margin: auto。这三个需要一起用实现居中。
左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗
y1059477028的博客
09-20 386
【代码】左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗。
Bootstrap Table详细使用教程
“Bootstrap table使用方法记录” Bootstrap Table是一款基于Bootstrap框架的开源插件，用于创建功能丰富的、响应式的表格。这个插件提供了多种内置功能，如排序、分页、过滤和自定义列显示等，使得在网页开发中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值