HTML 表格的基本布局

在可视化模型中，一个表格既可以生成块级框（display:table），也可以生成行内级框（display:inline-table），默认生成块级框。

无论是块级框，还是行内级框，table元素都会生成一个主框，其中包含一个 table 框和一个 caption 框。如图 7‑1 所示：

图7-1 表格的可视化模型

上图中，灰色虚线框的区域为 table元素形成的主框，蓝色区域为 table 框，红色区域为 caption 框，它们是两个独立的框，有各自独立的盒属性，如 marging、border等。主框的外边距，由 table元素 margin 属性定义。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

HTML 表格的基本布局相关推荐

《Dreamweaver CS6 完全自学教程》笔记第六章：使用表格进行网页布局
文章目录第六章:使用表格进行网页布局 6.1 创建表格 6.2 应用表格 6.2.1 输入表格内容 6.2.2 选定表格元素 6.2.3 设置表格与单元格属性实战:制作细线表格 6.2.4 添加和 ...
html网页 table布局实例,HTML用Table表格对网页布局
HTML是用于开发网页的"超文本标记语言",今天我们一起来学习一下HTML+CSS网页布局中Table布局方式. 常见的网页布局用CSS而言一般有经典行布局.经典列布局.双飞翼布局 ...
怎样让dw的html表格移动,妙用dw图层与表格进行网页布局-网页设计,Dreamweaver
使用图层可以像素为单位精确定位页面元素,并且可以将层放置在页面的任意位置.当把页面元素放入图层之中时,还可以控制哪个显示在前面.哪个显示在后面.哪个显示.哪个隐藏,可见,层的优点是很明显的.但是目前浏 ...
HTML如何改变表格浮动位置,css控制表格样式 css布局浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
超 Nice 的表格响应式布局小技巧
今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 1.在屏幕视口较为宽时,表现为一个整体 Table 的样式 2.而当屏幕视口宽度 ...
java表格控件布局_Swing布局之表格布局（GridLayout）
表格布局是按照表格的样式来放置按钮,如下: package com.fepc.commons.exports; import java.awt.Dimension; import java.awt.G ...
html div转换表格,Dreamweaver页面布局：表格与Div的相互转换
我们在Dreamweaver中使用AP Div定位网页中的内容比用表格定位网页中的内容更方便.因为AP Div可以随意移动.所以可以先用AP Div制作网页,然后再按照需要将AP Div转化为表格. ...
HTML学习之路-03HTML表格、table布局
目录一.HTML表格 a.基本知识 1.table标签 2.tr标签 3.td和th标签 b.练习 1.代码 2.运行 3.分析 4.感悟 c.案例 1. 效果: 2.分析注意:以上tr正确写法应 ...
html表格及传统布局
个人博客页面链接:http://www.shihao.online/(博客还在开发阶段,欢迎访问) html表格 table常用标签 1.table标签:声明一个表格 2.tr标签:定义表格中的一行 ...
html5 table样式css,css表格样式的布局篇
进修了div css构造后,确凿css对表格样式的设置就变得简单了.一样平常对table配置class或id来对其设置装备摆设CSS花色. 表格CSS花式配置实例代码: 表格CSS设置装备摆设实例 C ...

HTML 表格的基本布局

HTML 表格的基本布局相关推荐

最新文章

热门文章