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. php的乱码问题

    $content=file_get_contents("http://www.ctsdc.com/");$pattern="/<a\s+href=.*<\/a ...

  2. 安装XDEBUG步骤及问题

    echo PHPINFO(); 如果搜索中没找到XDEBUG, 则表示没安装XDEBUG; XDEBUG官方下载路径, https://xdebug.org/download.php 查看环境参数 我 ...

  3. C#整数三种强制类型转换int、Convert.ToInt32（）、int.Parse()的区别

    1.int适合简单数据类型之间的转换,C#的默认整型是int32(不支持bool型); 2.int.Parse(string sParameter)是个构造函数,参数类型只支持string类型; 3. ...

  4. Flink - state管理

    在Flink – Checkpoint 没有描述了整个checkpoint的流程,但是对于如何生成snapshot和恢复snapshot的过程,并没有详细描述,这里补充   StreamOperato ...

  5. AFN 2.6 code报错总结

    1. 错误打印  code=-1016 filed: text/html 错误原因:AFN默认不能解析请求回来的text/html数据 解决办法: AFN3.0的请看这里 AFHTTPSessionM ...

  6. find 找出大文件

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

  7. substr mb_substr mbstrct 的用法区别

    1.substr遇到中文会出问题,用于截取英文字符 2.mb_substr() 按字符截取字符串,需要开启php_mbstring.dll <?php echo mb_substr(, , 'u ...

  8. CentOS修改mysql 用户root的密码并允许远程登录

    第一步:用帐号登录mysql[root@CentOs5 ~]# mysql -u root -p 第二步:改变用户数据库mysql> use mysql 第三步:修改密码,记得密码要用passw ...

  9. 事务复制-大批量DEL操作

    同事讨论删除发布表历史记录,导致订阅端数据滞后N小时.后来询问得知,发布表T只保留最近31天的数据,每天由Job删除31天前的数据,每天的删除量约400-500万条.默认情况下,在发布端删除400万条 ...

  10. 移动web开发框架

    纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族 ...