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

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

时间:2023-01-03 12:07:25浏览次数:40  
标签: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......