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. Apache Spark技术实战之6 -- spark-submit常见问题及其解决

    除本人同意外,严禁一切转载,徽沪一郎. 概要 编写了独立运行的Spark Application之后,需要将其提交到Spark Cluster中运行,一般会采用spark-submit来进行应用的提交 ...

  2. DataGridView key points

    Simple Examples => http://csharp.net-informations.com/datagridview/csharp-datagridview-readonly-c ...

  3. Error Domain=NSOSStatusErrorDomain Code=1718449215 "The operation couldn’t be completed. (OSStatus error 1718449215.)"

    是在录音时,recoreder的录音格式不对.

  4. ionic实现手机检测app是否安装，未安装则下载安装包，已安装则打开app（未实现iOS平台）

    插件需求(上cordova官网下载): com.lampa.startapp cordova-plugin-appavailability cordova-plugin-inappbrowser 代码 ...

  5. VMware ESXI磁盘下载虚拟机迁移到另一台VMware ESXI

    1.从10.8.9.156服务器下载虚拟机文件上传到10.8.9.160服务器使用. 2.选择虚拟文件夹点击下载到本地计算机. 3.浏览10.8.9.160数据存储. 4.把存放在本地计算机虚拟文件夹 ...

  6. sprint3终极演示

    目标功能: 已实现功能: 首页.订单.资料界面 首页.订单.资料按钮 化妆师.化妆品.化妆视频按钮 化妆师.化妆品的详细分类 化妆师.化妆品的详细信息显示 化妆师的预约按钮和联系按钮 化妆品的购买按钮 ...

  7. ANE 从入门到精通 --- 简单的Whatever

    Flash还是很好的,不过国内没人用. Whatever了. 以下是ANE制作中的一点笔记 分享下 也留作备份 Step1 编写As3 Library package com.eran { impor ...

  8. jQ HTML之捕获 设置 元素添加与删除

    捕获 设置修改 添加元素 删除元素

  9. java开发_读写txt文件操作

    package com.mi.util; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStr ...

  10. Excel应该这么玩——0、初衷：用IT方法玩Excel

    在企业中处理业务数据,最好的方案是使用业务系统.业务系统可以基于复杂的业务逻辑处理大量数据,并支持多人协作处理流程性的工作,对支撑企业运营非常重要.但是由于业务系统的复杂性很高,一点小小的改变也需要较 ...