首页 > 其他分享 >HTML学习之表格,列表,区块,布局

HTML学习之表格,列表,区块,布局

时间：2023-01-03 12:07:25浏览次数：41  
标签：20 定义 表格 元素 列表 HTML 区块


HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 
td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本.

HTML 表格标签

标签  描述
<table> 定义表格
<th>  定义表格的表头
<tr>  定义表格的行
<td>  定义表格单元
<caption> 定义表格标题
<colgroup>  定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
colspan表示合并列数,rowspan则表示合并行数
cellspacing表示单元格间距,cellpadding表示单元格边距

页眉主体页脚的范例,对一个复杂的界面做一个排版,以至于浏览器解析的时候不会出现问题

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>表格范例</title> 
</head>
<body>
<table>
  <thead>
    <tr>
      <th> Title </th>
      <th> Price </th>
      <th> Avaliable </th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td> CSS </td>
      <td> $29 </td>
      <td> 16 </td>
    </tr>
    <tr>
      <td> Java </td>
      <td> $35 </td>
      <td> 10 </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td> Total </td>
      <td> $64 </td>
      <td> 26 </td>
    </tr>
  </tfoot>
</table>
</body>
</html>

HTML学习之表格,列表,区块,布局_ci

多属性结合表格范例

css样式代码,声明一些表格样式:放body代码之前
<style>
.tabtop13 {
  margin-top: 13px;
}
.tabtop13 td{
  background-color:#ffffff;
  height:25px;
  line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
  font-family: 微软雅黑;
  font-size: 26px;
  font-weight: bold;
  border-bottom:1px dashed #CCCCCC;
  color: #255e95;
}
.titfont {
  
  font-family: 微软雅黑;
  font-size: 16px;
  font-weight: bold;
  color: #255e95;
  background: url(../images/ico3.gif) no-repeat 15px center;
  background-color:#e9faff;
}
.tabtxt2 {
  font-family: 微软雅黑;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  padding-right: 10px;
  color:#327cd1;
}
.tabtxt3 {
  font-family: 微软雅黑;
  font-size: 14px;
  padding-left: 15px;
  color: #000;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 20px;
} 
</style>
body代码:表格的核心逻辑
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="center" class="biaoti" height="60">受理员业务统计表</td>
  </tr>
  <tr>
    <td align="right" height="25">2017-01-02---2017-05-02</td>
  </tr>
</table>

<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
  <tr>
    <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td>
    <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
    <td colspan="2" class="btbg font-center titfont">拟办意见</td>
    <td colspan="2" class="btbg font-center titfont">返回修改</td>
    <td colspan="3" class="btbg font-center titfont">工单类型</td>
  </tr>
  <tr>
    <td width="8%" class="btbg font-center">同意</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">数量</td>
    <td width="8%" class="btbg font-center">比例</td>
    <td width="8%" class="btbg font-center">建议件</td>
    <td width="8%" class="btbg font-center">诉求件</td>
    <td width="8%" class="btbg font-center">咨询件</td>
  </tr>
  <tr>
    <td width="7%" rowspan="4" class="btbg1 font-center">受理处</td>
    <td width="7%"  class="btbg2">xfl</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
  <tr>
    <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td>
    <td width="7%"  class="btbg2">xfl</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td class="btbg2"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
   <tr>
    <td class="btbg2 font-center">总计</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
    <td class="btbg2 font-center">20</td>
  </tr>
</table>

HTML学习之表格,列表,区块,布局_html_02

HTML列表

<ol>  定义有序列表
<ul>  定义无序列表
<li>  定义列表项
<dl>  定义列表
<dt>  自定义列表项目
<dd>  定义自定列表项的描述

有序列表,可以使用type规定类型,默认是数字列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>有序列表</title> 
</head>
<body>
<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  
</body>
</html>

HTML学习之表格,列表,区块,布局_html_03

不同类型的无序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>无序列表</title> 
</head>
<body>
<p><b>注意：</b> 在 HTML4中ul属性已废弃，HTML5已不支持该属性，因此我们使用CSS代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

HTML学习之表格,列表,区块,布局_html_04

嵌套列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>嵌套列表</title> 
</head>
<body>
<h4>嵌套列表</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ul>
</body>
</html>

HTML学习之表格,列表,区块,布局_html_05

自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自定义列表</title> 
</head>
<body>
<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
</body>
</html>

HTML学习之表格,列表,区块,布局_ci_06

HTML区块

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始.实例: <b>, <td>, <a>, <img>

HTML div 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，
浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途
是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是
显示表格化的数据。

HTML span 元素

HTML <span> 元素是内联元素，可用作文本的容器.<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签  描述
<div> 定义了文档的区域，块级 (block-level)
<span>  用来组合文档中的行内元素， 内联元素(inline)

HTML布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素
进行定位，或者为页面创建背景以及色彩丰富的外观。

div块级元素进行HTML布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>div布局实例</title> 
</head>
<body>
<div id="container" style="width:500px">
  <div id="header" style="background-color:#FFA500;">
  <!--margin-bottom属性设置元素的下外边距-->
  <h1 style="margin-bottom:0;">主要的网页标题</h1>
  </div>
  <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
    <b>菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript
  </div>
  <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
  内容在这里</div>
  <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
  div布局</div>
</div>
</body>
</html>

HTML学习之表格,列表,区块,布局_自定义_07

table表格元素进行HTML布局

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>table布局</title> 
</head>
<body>
<table width="500" border="0">
  <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>主要的网页标题</h1>
    </td>
  </tr>
  <tr>
    <td style="background-color:#FFD700;width:100px;vertical-align:top;">
      <b>菜单</b><br>
      HTML<br>
      CSS<br>
      JavaScript
    </td>
    <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
    内容在这里</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    table布局</td>
  </tr>
</table>
</body>
</html>

HTML学习之表格,列表,区块,布局_自定义_08


标签：20,定义,表格,元素,列表,HTML,区块
From： https://blog.51cto.com/u_13831562/5985117

相关文章

  • HTML学习之基础元素,CSS,图像,链接
    什么是HTML?HTML是用来描述网页的一种语言。HTML指的是超文本标记语言:HyperTextMarkupLanguageHTML不是一种编程语言，而是一种标记语言标记语言是一套标记标签(ma......
  • 通过分析ExcelProperty注解的文字信息，实现自动表格。提高大多数日常业务查看，编辑页面
     importorg.springframework.util.ReflectionUtils;ReflectionUtils.doWithFields循环遍历对象中的所有属性。只处理其中ExcelProperty注解的字段。这个代码对很多单......
  • HTML速写
    一、【.body-list*100{测试$}】会增加100个div，class=body-list，div内容为测试1-测试100https://blog.csdn.net/weixin_34384681/article/details/930340631.输入html:5......
  • 处理docx解析为Html格式
    处理docx解析为html格式这里需要使用mammoth.js的依赖，以Vue中使用为例npminstallmammoth--savedata(){return{wordText:'',//用来保存解析好的ht......
  • HTML培训课程-------Day02（表格和框架）
    表格在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所......
  • HTML5有哪些内容？
    什么是HTML5?HTML5是最新的HTML标准,是专门为承载丰富的web内容而设计的，并且无需额外插件,拥有新的语义、图形以及多媒体元素,提供的新元素和新的API简化了web应......
  • HTML/CSS
    HTML基本框架<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head> <body></body></html>段落标记：<p></p>预留格式(文本中......
  • box1.html
    1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metahttp-equiv="X-UA-Compatible"content="IE=edge">6<metaname=......
  • jsdemo01.html
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript">varx;......
  • HTML5新增type类型，HTML5新增属性
    ​ html5版本新增了很多类型，我们挑一些常用的进行展示：详细学习地址可以参照w3c进行学习：https://www.w3school.com.cn/html5/att_input_type.asp<!DOCTYPEhtml><htm......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99