今天准备为大家准备了表格和列表。

一、文章有各种数据的表格这个网页也不例外。

（1）、标签意思　

<table>----------------------表格开始
　　<caption></caption>-------表格标题
　　　　<tr>--------------------行开始标签 
　　　　　　<th></th>-------------表头 
　　　　　　<tb></tb>-------------单元格 
　　　　</tr>-------------------行结束标签 
</table>---------------------表格结束

（2）、表格样式

　　cellpadding 属性设置单元格边框和单元格内容的距离。
　　cellspacing 属性设置单元格之间的距离。
　　border 属性表示边框  
      width 设置表格的宽。

      height 设置表格的高。 [注]：高这个属性最好不小给 table 中写，让它自动撑开就好。但这个可以给 tr 给每行需要的高度

代码

<html>

     <head>

	<title>表格</title>

     </head>

     <body>

	<table border="1px" width="500px" cellpadding="10px" cellspacing="10px">

　　		<caption>表格标题</caption>

　　　　		<tr height="50px">

　　　　　　		<th>表头</th>

　　　　　　		<th>表头</th>

　　　　		</tr>

		<tr>

　　　　　　		<td>单元格</td>

　　　　　　		<td>单元格</td>

　　　　		</tr>

	</table>

     </body>

</html>

效果

二、无序列表

<ul> 无序列表属性：
　　<li></li> 　　 （type属性） <ul type="dise">（是无序列表前边小黑点的属性）
</ul> 　　　　 　　 disc(实心圆) circle（空心圆） square（方块）

代码

<html>

     <head>

	<title>表格</title>

     </head>

     <body>

	 <ul type="circle">

 		<li>无序列表</li>

 	 </ul>           

     </body>

</html>

效果　

　

三、有序列表

有序列表：
<ol> 　　　　　　 有序列表属性：
　　<li></li>     （type属性） <ol type="1">
</ol> 　　　　　　 1(按数字1.2.3...往下排) A（按大写字母A.B.C...往下排） a（按小写字母a。b。c....往下排）
　　　　　　　　　　Ⅰ(按大写罗马数字Ⅰ、Ⅱ、Ⅲ.....往下排)
　　　　　　　　　　（start属性）<ol start="2">(表示这个有序列表不是默认的从1开始是从2开始的)

代码

<html>

     <head>

	<title>有序列表</title>

     </head>

     <body>

	  <ol type="A">

   		<li>有序列表</li>

   		<li>有序列表</li>

   		<li>有序列表</li>

 	  </ol>                     

     </body>

</html>

效果 按照A,B,C... 往下排 type 只能写那三种

html基础-表格-列表（4）的更多相关文章

  1. 【共享单车】—— React后台管理系统开发手记：AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  2. 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  3. 1.进入debug模式（基础知识列表）

    1.进入debug模式(基础知识列表)1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ========================= ...

  4. Python基础数据类型-列表（list）和元组（tuple）和集合（set）

    Python基础数据类型-列表(list)和元组(tuple)和集合(set) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客使用的是Python3.6版本,以及以后分享的 ...

  5. 【转】一张图解析FastAdmin中的表格列表的功能

     一张图解析FastAdmin中的表格列表的功能 功能描述请根据图片上的数字索引查看对应功能说明. 1.时间筛选器如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如 {field: ...

  6. python基础之列表list元组tuple

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7041763.html python基础之列表list元组tuple 列表li ...

  7. python基础数据类型--列表（list）

    python基础数据类型--列表(list) 列表是我们在后面经常用到的数据类型之一,通过列表可以对数据类型进行增.删.改.查等操作 一列表的增.删.改.查 1增: 1.1增加到最后   append ...

  8. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  9. 【学习笔记】HTML基础：列表、表格与媒体元素

    一.列表是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够快速的获取相应的信息. 1.无需列表 <ul> <li>第一项</li ...

随机推荐

  1. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  2. subtext 安装PythonIDE -Anaconda

    安装PythonIDE -Anaconda 打开subtext,通过快捷键 cmd+shift+P 打开 Package Control 来安装其他的插件了. 输入 install 然后你就能看见屏幕 ...

  3. WebForm——浏览器兼容、旋转、缩放、倾斜、移动

    transform属性 一.旋转-rotate(角度deg)-deg为角度单位 -o-transform:rotate(45deg) Opera -ms-transform:rotate(45deg) ...

  4. “context:include-filter”与“context:exclude-filter”标签作用解释

    注意到spring中<context:component-scan>标签中会出现include和exclude的子标签,具体是做什么用的? spring的配置文件与springmvc的配置 ...

  5. 课程一(Neural Networks and Deep Learning)，第一周（Introduction to Deep Learning）—— 1、经常提及的问题

    Frequently Asked Questions Congratulations to be part of the first class of the Deep Learning Specia ...

  6. 剑指offer四十九之把字符串转换成整数

    一.题目 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 二.思路 详见代码. 三.代码 public class Solution { ...

  7. Win7中安装EclipsePHP

    1. 安装WarmServer(一键式安装apache+php+mysql); 2. 将安装后的EclipsePHP工作目录workspace指向WarmServer安装目录下的www目录下即可 异常 ...

  8. 如何在window server IIS上部署可以使用web deploy?

    环境: windows server2012 方式1: 1,下载"wpilauncher.exe" Web平台安装程序.下载地址:http://www.microsoft.com/ ...

  9. android的几种“通知”方式简单实现（Notification&NotificationManager）

    关于通知Notification相信大家都不陌生了,平时上QQ的时候有消息来了或者有收到了短信,手机顶部就会显示有新消息什么的,就类似这种.今天就稍微记录下几种Notification的用法.3.0以 ...

  10. 关于符号Symbol第二篇

    来看一下继承自Symbol的具体实现类. 1.TypeSymbol /** A class for type symbols. * Type variables are represented by ...