HTML表格

表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。

下表总结了一些常用的标签：

表格 描述
<table> 定义表格
<caption> 定义表格标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格的单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格的列属性

先定义一个简单的表：

运行后可以看到

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

        <table border="1">

            <tr>

                <td>水果</td>

                <td>水果</td>

                <td>水果</td>

            </tr>

    <!-- 下面将td与tr反正写了，是不会构成表的 -->

            <td>

                <tr>asd</tr>

                <tr>asd</tr>

                <tr>asd</tr>

                <tr>asd</tr>

            </td>

        </table>

    </body>

</html>

可以看到，上面注释下面的<td>与<tr>反正写了。会出现一个很细小的表格，但是<tr>中写的文字，是不会显示上去的

所以html中，编写表格是要一行一行的写。<tr>标签中包含<td>

没有边框的表格

没有边框的表格，其实就是在<table>标签中，不加属性border。border这个属性是代表表格的边框。如果不加属性的话，默认border="0" ，但是没有边框有的时候你就看不出来它是一张表格了。所以有的时候会给border="1px"设置1像素的边框。暂时去掉border属性，完成一张没有边框的表格

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

        <table>

            <tr>

                <td>呵呵</td>

                <td>哈哈</td>

                <td>嘻嘻</td>

            </tr>

            <tr>

                <td>嘿嘿</td>

                <td>嘎嘎</td>

                <td>噗噗</td>

            </tr>

            <tr>

                <td>啊啊</td>

                <td>哦哦</td>

                <td>噢噢</td>

            </tr>

        </table>

    </body>

</html>

表格中的表头 <tr><th>我是表头</th></tr>

还可以给表添加表头，使用<th>标签，<th>标签也是在<tr>标签中的，我们为了好看，还是把border加上：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

        <table border="1">

            <tr>

                <th>人物</th>

                <th>介绍</th>

                <th>产品</th>

            </tr>

            <tr>

                <td>史蒂夫·保罗·乔布斯</td>

                <td>苹果CEO</td>

                <td>Apple系列</td>

            </tr>

            <tr>

                <td>丹尼斯·里奇</td>

                <td>C语言之父</td>

                <td>C语言</td>

            </tr>

            <tr>

                <td>比尔·盖茨</td>

                <td>微软CEO</td>

                <td>Windows系统</td>

            </tr>

        </table>

    </body>

</html>

还可以设置表格内的边距 cellpadding 属性
也可以设置单元格边距 cellspacing 属性

<table border="1" cellpadding="10" cellspacing="10">

    <tr>

        <td>xxx</td>

    </tr>

</table>

带有标题的表格 <caption>

<table border="1" cellpadding="10" cellspacing="10">

            <caption>xxx表</caption>

            <tr>

                <td>xxx</td>

            </tr>

</table>

表格内的颜色bgcolor属性

<table border="1" bgcolor="red">

    <tr>

        <td>xxx</td>

    </tr>

</table>

单元格内容排列 align 属性分别有center、left、right

<table border="1" align="center">

    <caption>xxx表</caption>

    <tr>

        <td>xxx</td>

    </tr>

</table>

跨行和跨列的单元格 colspan属性，准确的来说，就是合并单元格

<table border="1">

    <caption>xxx表</caption>

    <tr>

        <td colspan="2">xxx</td>

        <td>xxx</td>

    </tr>

    <tr>

        <td>xxx</td>

        <td>xxx</td>

        <td>xxx</td>

    </tr>

</table>

HTML列表

列表就是像word里面的标题一样，顺着往下数的标题。

下标是一些控制标题的标签

标签 描述
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dt> 列表项
<dd> 描述

这些列表还分有序列表，无序列表和自定义列表。

无序列表

<ul>、<li>

属性：disc：实体圆、circle：空心圆、square：实体方块

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

    <!-- 无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置 -->

        <ul>

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ul>

    <!-- 这些属性都是通过type来定义的，circle是定义一个空心圆 -->

        <ul type="circle">

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ul>

    <!-- square定义实体方块 -->

        <ul type="square">

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ul>

    </body>

</html>

有序列表

<ol>、<li>

属性：A、a、l、i、start

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

    <!-- 有序列表默认是数字往下计数的 -->

        <ol>

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ol>

    <!-- 定义A，就是按照大写字母来计数的，当然了，不能直接定义B，它不是不会从B开始数的 -->

        <ol type="A">

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ol>

    <!-- 定义a，就是安装小写字母开始计数的 -->

        <ol type="a">

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ol>

    <!-- 定义I，就是按照大写罗马数字计数的 -->

        <ol type="I">

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ol>

    <!-- 定义i，就是按照大写罗马数字计数的 -->

        <ol type="i">

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ol>

    <!-- start属性，就是按照从多少数来计数，比如我想从3开始计数。start属性只能定义数字，不支持英文字母哦。 -->

        <ol start="3">

            <li>我是第一个</li>

            <li>我是第二个</li>

            <li>我是第三个</li>

        </ol>

    </body>

</html>

嵌套列表

<ul>、<ol>、<li>

嵌套列表就是有序列表套无序列表，无序套有序的呗。

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

        <ol>

            <li>人物</li>

            <ul>

                <li>斯蒂芬·保罗·乔布斯</li>

                <li>丹尼斯·里奇</li>

                <li>比尔·盖茨</li>

            </ul>

            <li>动物</li>

            <ul>

                <li>猫</li>

                <li>狗</li>

                <li>熊</li>

            </ul>

        </ol>

    </body>

</html>

自定义列表

<dl>、<dt>、<dd>

自定义的列表，就是没有有序、无序的点。后期可以用CSS样式来加工修改。也是比较常用的操作

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

    </head>

    <body>

        <dl>

            <li>我是标题</li>

            <dt>

                <dd>我是正文，我必须长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</dd>

            </dt>

        </dl>

    </body>

</html>

HTML表格与列表的更多相关文章

  1. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

  2. 第七十五节，CSS表格与列表

    CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下:             属性               值           ...

  3. Easyui数据表格-地区列表及工具栏增删改

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. html表格，列表

    1. 表格由 <table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义).字母 td 指表格数据(t ...

  5. 【CSS3】表格、列表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Java生成PDF文档（表格、列表、添加图片等）

    需要的两个包及下载地址: (1)iText.jar:http://download.csdn.net/source/296416 (2)iTextAsian.jar(用来进行中文的转换):http:/ ...

  7. HTML02--引用样式、表格、列表、div布局

    接上一篇“HTML01随笔” 1.使用样式:    内联样式:标签中使用style属性    内部样式:<head>使用<style type="text/css" ...

  8. 认识HTML中表格、列表标签以及表单控件

    前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表.格式:&l ...

  9. html表格及列表

    表格的属性: border:边框 cellpadding:内边距  单元格边框跟内容之间的间距 cellspacing:外边距  单元格跟单元格之间的距离 align:表格的对其样式 width:宽度 ...

随机推荐

  1. IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)

    **********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewContro ...

  2. A Great Alchemist

    Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB ProblemCarol is a great alchemist. In ...

  3. Fail to start neutron-server

    问题: [root@localhost ~]# systemctl status neutron-server ● neutron-server.service - OpenStack Neutron ...

  4. Amoeba For MySQL读写分离

    Amoeba安装,参考http://hi.baidu.com/itfenqing/item/79fe989838e1e8ad83d2959c Amoeba版本为:amoeba-mysql-1.3.1- ...

  5. 分时间uu

    #include<stdio.h> int map[20][4]; typedef struct node{  int star;  int end; }node; node dui[10 ...

  6. grep中正则匹配的使用

    如要匹配Computer或computer两个单词,可做如下操作: [Cc]mputer “.”允许匹配ASCII集中任意字符,或为字母,或为数字. 使用\{\}匹配模式结果出现的次数 匹配字母A出现 ...

  7. 程序最多能new多少内存（2G内存里要放程序的5大区，HeapAlloc比new要快多了，而且超过2G的时候会告诉你）

    根据<Windows核心编程>得知:X86操作系统提供每个程序最多只有4G的虚拟内存,其中2G虚拟内存提供给系统用(具体用来干什么还待考察),还有2G的内存留给用户使用.那这2G内存能拿来 ...

  8. 纯代码TableView自适应高度（很老的使用方法）

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{    return  ...

  9. 基于docker＋etcd＋confd ＋ haproxy构建高可用、自发现的web服务

    基于docker+etcd+confd + haproxy构建高可用.自发现的web服务 2016-05-16 15:12 595人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主 ...

  10. Hadoop学习笔记： MapReduce Java编程简介

    概述 本文主要基于Hadoop 1.0.0后推出的新Java API为例介绍MapReduce的Java编程模型.新旧API主要区别在于新API(org.apache.hadoop.mapreduce ...