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. JQuery-属性

    // attr能访问到的都是html里面的样式,诸如内联样式.外部样式和外联样式该方法访问不到 $('#div1').width('400px') // 这个用来改样式css $("#div ...

  2. 当select框变化时 获取select框中被选中的值

    DOM <select name="course"> <option value="1">1</option> <op ...

  3. angularJs的ng-class切换class

    在angular中为我们提供了3种方案处理class: 1:scope变量绑定 2:字符串数组形式. 3:对象key/value处理. 第一种我们不推荐使用,看看其他两种解决方案: 字符串数组形式 字 ...

  4. 推荐几个好用的在线svn空间

    推荐 免费的svn空间 1.http://www.svn999.com/ [推荐] 个人感觉比svnchina.svnspot好用多了,申请容易,功能齐全,速度也很快,关键还是免费容量比svnchin ...

  5. centos 下建用户 shell编程

    useradd 用户名 passwd 用户名 cat /etc/passwd  查看用户信息 删除用户 userdel -r   加一个 -r 表示把用户及用户的主目录都删除 su  切换用户 sud ...

  6. windows磁盘分区

    windows 下对磁盘进行分区吗,如何调整大小. N的输入单位为GB,输出单位为MB; (N-1)4+1024N;

  7. ZOJ 1015 Fishing Net（弦图判定）

    In a highly modernized fishing village, inhabitants there make a living on fishery. Their major tool ...

  8. 0511 backlog

    SCRUM 这次的作业就是确定SCRUM的计划,确定sprint backlog的一个冲刺周期,而这个周期是两个星期.争取在两周内发布1.0版本. 本次作业以网站构建为主: ID       NAME ...

  9. 大数据导致DataReader.Close超时的异常

    公司一个数据抓取的程序,数据量极大,读取数据的用IDataReader的Read方法来进行数据处理,在测试的时候我想跑一部分数据后跳出循环,即break; 然后关闭datareader,但是在执行da ...

  10. mfc ui3

    引用:http://www.cnblogs.com/rainbowzc/archive/2010/06/02/1749872.html 本文专题讨论VC中的界面美化,适用于具有中等VC水平的读者.读者 ...