HTML&CSS基础学习笔记1.16-单元格间距和表格主体
上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识。
单元格间距
在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白。这是由<table>的[cellspacing]属性控制的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单元格间距 cellspacing</title>
</head>
<body>
<h2>观察cellspacing的作用</h2>
<table border="1" cellspacing="1">
<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>
这种情况下的表格是这样的:
表格的主体
在我们经常使用的数据表格中,并不是所有行都表示数据,一般第一行会定义一些表头的信息,后面才是表格的正文主体,如:
如下代码是<tbody>标签的使用方法:
<table>
<tbody>
<tr>
<td>主体</td>
</tr>
</tbody>
</table>
现在就让我们使用下tbody标签吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用tbody标签</title>
</head>
<body>
<h1>使用tbody标签</h1>
<table border="1">
<tbody>
<tr><td>第一个单元格</td><td>第二个单元格</td></tr>
<tr><td>第三个单元格</td><td>第四个单元格</td></tr>
</table>
</body>
</html>
结果如何呢?
更多学习内容就在码芽网http://www.mayacoder.com/lesson/index
HTML&CSS基础学习笔记1.16-单元格间距和表格主体的更多相关文章
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- C#学习笔记8:HTML和CSS基础学习笔记
<!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...
- HTML&CSS基础学习笔记1.15-合并单元格
合并单元格 之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识 ...
- CSS基础学习笔记
一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...
- HTML&CSS基础学习笔记1.18-表格的边框
今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧 表格的边框 前面为了方便观察表格单元格的情况,我们给<table>加了border属性.<table>的borde ...
- HTML&CSS基础学习笔记1.31-像素和相对长度
像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...
- HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...
- HTML+CSS基础学习笔记(8)
一.水平居中设置--行内元素 如果设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的 二.水平居中设置 --定宽块状元素 #当被设置元素为块状元素时 ...
- HTML+CSS基础学习笔记(7)
CSS布局模型 在网页中,元素有三种布局模型: 1.流动模型(Flow) 2.浮动模型(Float) 3.层模型(Layer) 一.流动模型 流动(Flow)是默认的网页布局模型,网页在默认状态下的H ...
随机推荐
- 05 - 替换vtkDataObject中的Update方法 VTK 6.0 迁移
VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.下面讨论update方法并提供迁移现有代码的建议. Update() vtkDataObject::Upd ...
- 为什么设计模式在C++社区没有Java社区流行?
我们发现设计模式在Java社区很流行,但是在C++社区却没有那么被关注,甚至有点被排斥,究竟是什么原因造成这个差异的呢? 昨天和同事讨论这个问题,最后得出几点原因: (1)C++内存需要 ...
- PowerShell 转码函数 Default->UTF8
$chs='你好' function converToUft8($str){ $bs=[System.Text.Encoding]::Default.GetBytes($str); $u8Char=[ ...
- Android Activity整体管理和关闭工具类封装
如何彻底退出程序,在任意位置退出程序,如何管理当前的运行栈,知道activity的堆栈结构等,本文封装了一个Activity管理类,可以方便随时退出程序. /** * 应用程序Activity管理类: ...
- ZOJ 2760 How Many Shortest Path
题目大意:给定一个带权有向图G=(V, E)和源点s.汇点t,问s-t边不相交最短路最多有几条.(1 <= N <= 100) 题解:从源点汇点各跑一次Dij,然后对于每一条边(u,v)如 ...
- linux中断处理程序
Linux进行中断处理的4个步骤: 1.当中断产生,跳到统一入口IRQ_SVC 2.获取中断号 3.根据中断号找到irq_desc结构 4.从irq_desc结构中取出事先注册好的中断处理函数 Lin ...
- Android 调用图库选择图片实现和参数详解
//选择图片,调用图库 bt4.setOnClickListener(new OnClickListener() { @Override public void o ...
- Android样式的编写格式
<?xml version="1.0" encoding="utf-8"?> <resources> <style name=&q ...
- typedef与define的区别
1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如:#define PI 3.1415 ...
- js中的call()与apply()
js中的call()函数和apply()函数: 1.主要作用:是用于指定作用域和传参 (1)用于指定作用域 window.color = "red"; var o = { colo ...