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

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

(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. ReentrantLock获取到非公平锁的源码

    /** * Performs lock. Try immediate barge, backing up to normal * acquire on failure. */ final void l ...

  2. day 69crm(6) stark组件 action 和 多层过滤效果

      前情提要: 今天学的是stark 组件的 action  和多层过效果 一: action (自定制函数多选功能效果) 1: 学习 观点明确:     2: 多选效果前端和后端进行的操作   2& ...

  3. (原创)JAVA阻塞队列LinkedBlockingQueue 以及非阻塞队列ConcurrentLinkedQueue 的区别

    阻塞队列:线程安全 按 FIFO(先进先出)排序元素.队列的头部 是在队列中时间最长的元素.队列的尾部 是在队列中时间最短的元素.新元素插入到队列的尾部,并且队列检索操作会获得位于队列头部的元素.链接 ...

  4. iOS9新特性-UIStackView

    1. UIStackView相关属性理解 UIStackView是iOS9之后推出的,我也是第一次接触,在学习的过程中对于其中的相关属性,尤其是对其中的distribution几个属性值,一知半解的, ...

  5. while 语句

    /* while循环 格式:while(循环保持条件){需要执行的语句} OC: int i = 0; int sum = 0; while (i <= 10) { sum = i++; } w ...

  6. C、C++基础和编程风格 (转)

    原文链接 作者:寒小阳时间:2013年8月.出处:http://blog.csdn.net/han_xiaoyang/article/details/10515417.声明:版权所有,转载请注明出处, ...

  7. mysql ERROR 1045 (28000): Access denied for user 可能解决方法分析

    在实际登录redmine的过程中,我们遇到了如下的error ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using ...

  8. Java之集合(九)LinkedHashMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7367525.html 1.前言 前一章对Map中的HashMap进行了讲解(虽然只详细介绍了一下红黑树的部分), ...

  9. C# 对象相等性判断和同一性判断

    在日常开发中经常需要编写代码比较不同的对象.例如,有时需要将对象都放到一个集合中,并编写代码对集合中的对象进行排序.搜索或者比较. System.Object类有两个Equals方法,如下: 1.实例 ...

  10. 模拟登陆+数据爬取 (python+selenuim)

    以下代码是用来爬取LinkedIn网站一些学者的经历的,仅供参考,注意:不要一次性大量爬取会被封号,不要问我为什么知道 #-*- coding:utf-8 -*- from selenium impo ...