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. Linux下动态库(.so)和静态库(.a) 的区别

    静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.编译之后程序文件大,但加载快,隔离性也好.动态库在程序编译时并不会被连接到目标代码中,而是在程序运行是才被载入,因此在程序运行时还 ...

  2. 使用本地phpmyadmin管理远程数据库

    使用放下挺简单的,因为某些业务需求,phpmyadmin不让放在网站服务器上,所以放在本地可以方便管理远程数据库 点击下载会下载一个  config.inc.php 吧这个文件放在phpmyadmin ...

  3. 10与元素亲密接触：盒元素（the box model）

    line-height属性可以设置文本的行间距,可以用像素.em或百分比等于字体大小有关的值定义行间距line-height: 1.6em;(行间距为字体大小的1.6倍) CSS把每一个单一的元素看作 ...

  4. C#中的泛型 【转】

    C#中的泛型 泛型(generic)是C#语言2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确 ...

  5. find 找出大文件

    找到大文件 find . -type f -size +100M -exec du -smh {} \;

  6. iOS/OS X线程安全的基础知识

    处理多并发和可重入性问题,是每个库发展过程中面临的比较困难的挑战之一.在Parse平台上,我们尽最大的努力保证你在使用我的SDKs时所做的操作都是线程安全的,保证不会出现性能问题. 在这篇文章中我们将 ...

  7. Vue 双层嵌套

    这种的需要双层嵌套. 代码: <table id="ict-table" class="ict-table ict-report-table blue-theme& ...

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

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

  9. 不错的开源FTP类库

    socket开源ftp类库代码:http://netftp.codeplex.com/ 需要注意事项,如果以下代码出现乱码问题,可以设置其中的Encoding属性就可以. 用法示例: using Sy ...

  10. YL-64 颜色传感器

    TCS3200颜色传感器是一款全彩的颜色检测器,包括了一块TAOS TCS3200RGB感应芯片和4个白光LED灯,TCS3200能在一定的范围内检测和测量几乎所有的可见光.它适合于色度计测量应用领域 ...