本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > 网页其他 >

收藏
分享到

Table和div的介绍及用法

网页其他 来源：互联网 作者：佚名 发布时间：2024-11-22 17:47:47 人浏览
摘要

Web前端1 学号 姓名 性别 年龄 01 张三 男 20 02 李四 女 21 人数合计 60 表格的组成部分： 标题 表头 主体 表尾 Table 定义一个表格 1 2 table border=1 cellspacing=0 cellpadding=0 align=center /table Caption 定义表格

Web前端1

 

学号

姓名

性别

年龄

01

张三

男

20

02

李四

女

21

人数合计

60

 

表格的组成部分：

    标题 表头 主体 表尾

Table 定义一个表格

1

2

<table border="1" cellspacing="0" cellpadding="0" align="center">

</table>

Caption 定义表格的标题

1

<caption>web前/caption>端1<

Thead 定义表头的部分

1

2

3

4

5

6

7

8

<thead>

                <tr>

                    <th>学号</th>

                    <th>姓名</th>

                    <th>性别</th>

                    <th>年龄</th>

                </tr>

            </thead>

Tbody 定义表格的主体

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<tbody>

                <tr>

                    <td>01</td>

                    <td>张三</td>

                    <td>男</td>

                    <td>20</td>

                </tr>

                <tr>

                    <td>02</td>

                    <td>李四</td>

                    <td>女</td>

                    <td>21</td>

                </tr>

                <tfoot>

                    <tr>

                        <td colspan="3">人数合计:</td>

                        <td>60</td>

                    </tr>

                </tfoot>

            </tbody>

Tfoot 定义表尾，一般来显示汇总信息

1

2

3

4

5

6

<tfoot>

                    <tr>

                        <td colspan="3">人数合计:</td>

                        <td>60</td>

                    </tr>

                </tfoot>

Tr 定义一行

1

2

3

4

5

6

<tr>

                    <th>学号</th>

                    <th>姓名</th>

                    <th>性别</th>

                    <th>年龄</th>

                </tr>

Th td 定义数据项（单元格） th 一般用于表头，有加粗的样式

                                             Td 一般用于主体部分，没有加粗样式

1

2

3

4

5

6

<tr>

                    <td>01</td>

                    <td>张三</td>

                    <td>男</td>

                    <td>20</td>

                </tr>

Td rowspan 和 colspan 分别定义单元格跨行的行数，跨列的列数

1

<td colspan="3">人数合计:</td>

Cellspacing 定义表格的间距

Cellpadding 定义表格的边距

1

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

Div 定义一个分块 （division）

1

<div style="width: 200px;height: 200px;background-color:skyblue";>

特点：在新的一行显示  块级标签

块级标签 与 行内标签的区别：

块级标签占满行  行内标签会按照顺序从左到右依次排列

块级标签：h1-h6  p  ul  ol  li  div table  dl  form

行内标签：span  a  br lable  I  em

块级元素的特点：display:block

  • 每个块都是从新的一行开始，后面的元素会另起一行
  • 元素的宽度、高度、行高、内外边距都是可设置的
  • 如果不设置元素的宽度，是他父容器的100%，除非你给他设定高度

行内元素的特点：display：inline

  • 和其他的元素都在一行上
  • 不能设置元素的宽度，高度，行高，内外边距
  • 元素的宽度是他包含文字或图片的宽度，不能改变

行内块元素的特点：display：inline-block

  • 和其他的元素都在一行上
  • 宽度，高度，行高，内外边距都可以设置的
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • Table和div的介绍及用法
    Web前端1 学号 姓名 性别 年龄 01 张三 男 20 02 李四 女 21 人数合计 60 表格的组成部分： 标题 表头 主体 表尾 Table 定义一个表格 1 2 table bord

  • 告别硬编码让你的前端表格自动计算的代码

    告别硬编码让你的前端表格自动计算的代码
    当我的团队进行税务系统模块开发的时候，我发现他们需要花费80%的时间去解决计算问题，尤其体现在表格（Grid）中的计算，这些时间花在
  • 前端实现字符串GBK与GB2312的编解码总结
    在开发项目的时候遇到的一个比较坑的问题，产品要求从浏览器拿到浏览器地址栏里面的搜索词进行判断，我们一般使用的都是UTF-8的编码格
  • 网页中使用Unicode字符的简介(&#,\u等)
    最早的计算机只能使用ASCII字符，但随着计算机应用范围的扩展，很多国家都设计了用于计算机的特殊字符集，使自己国家和民族的字母及文

  • bootstrap panel的详细介绍

    bootstrap panel的详细介绍
    1、面板 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同
  • Bootstrap中列表组、分页和进度条组件的用法介绍
    列表组 使用.list-group选择列表组 添加.active到 a.list-group-item以指示当前的活动选择。【相关推荐：《bootstrap教程》】 添加.disabled到 a.list-gr
  • bootstrap中栅格布局的详细介绍
    1.什么是栅格布局？ 以前的网页制作布局用的是tabel布局，通过把表格将网页分为大大小小的表格，再从表格中填充元素。后来发展为div+c

  • bootstrap用于jsp页面的详细介绍

    bootstrap用于jsp页面的详细介绍
    jsp页面是指在传统的HTML页面文件中加入java程序和jsp标签的页面 JSP 页面的扩展名为 .jsp 或.jspx，web 服务器通过此扩展名通知 JSP 引擎处理该
  • bootstrap是自适应的吗？
    bootstrap是自适应的吗 bootstrap是自适应的 自适应是 不管屏幕多大，都尽量不换行，而只是横向缩放。而Boostrap是通过栅栏系统实现自适应的。

  • bootstrap怎么做到点击表格表头排序

    bootstrap怎么做到点击表格表头排序
    本篇文章介绍bootstrap怎么做到点击表格表头排序 使用Bootstrap可以快速制作出响应式网页，有时候项目中会用到Bootstrap点击表格table的表头列
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计