上一篇讲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-单元格间距和表格主体的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. C#学习笔记8:HTML和CSS基础学习笔记

    <!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...

  3. HTML&CSS基础学习笔记1.15-合并单元格

    合并单元格 之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识 ...

  4. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  5. HTML&CSS基础学习笔记1.18-表格的边框

    今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧 表格的边框 前面为了方便观察表格单元格的情况,我们给<table>加了border属性.<table>的borde ...

  6. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  7. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  8. HTML+CSS基础学习笔记(8)

    一.水平居中设置--行内元素 如果设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的 二.水平居中设置 --定宽块状元素 #当被设置元素为块状元素时 ...

  9. HTML+CSS基础学习笔记(7)

    CSS布局模型 在网页中,元素有三种布局模型: 1.流动模型(Flow) 2.浮动模型(Float) 3.层模型(Layer) 一.流动模型 流动(Flow)是默认的网页布局模型,网页在默认状态下的H ...

随机推荐

  1. 05 - 替换vtkDataObject中的Update方法 VTK 6.0 迁移

    VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.下面讨论update方法并提供迁移现有代码的建议. Update() vtkDataObject::Upd ...

  2. 为什么设计模式在C++社区没有Java社区流行?

    我们发现设计模式在Java社区很流行,但是在C++社区却没有那么被关注,甚至有点被排斥,究竟是什么原因造成这个差异的呢?    昨天和同事讨论这个问题,最后得出几点原因:     (1)C++内存需要 ...

  3. PowerShell 转码函数 Default->UTF8

    $chs='你好' function converToUft8($str){ $bs=[System.Text.Encoding]::Default.GetBytes($str); $u8Char=[ ...

  4. Android Activity整体管理和关闭工具类封装

    如何彻底退出程序,在任意位置退出程序,如何管理当前的运行栈,知道activity的堆栈结构等,本文封装了一个Activity管理类,可以方便随时退出程序. /** * 应用程序Activity管理类: ...

  5. ZOJ 2760 How Many Shortest Path

    题目大意:给定一个带权有向图G=(V, E)和源点s.汇点t,问s-t边不相交最短路最多有几条.(1 <= N <= 100) 题解:从源点汇点各跑一次Dij,然后对于每一条边(u,v)如 ...

  6. linux中断处理程序

    Linux进行中断处理的4个步骤: 1.当中断产生,跳到统一入口IRQ_SVC 2.获取中断号 3.根据中断号找到irq_desc结构 4.从irq_desc结构中取出事先注册好的中断处理函数 Lin ...

  7. Android 调用图库选择图片实现和参数详解

    //选择图片,调用图库        bt4.setOnClickListener(new OnClickListener() { @Override            public void o ...

  8. Android样式的编写格式

    <?xml version="1.0" encoding="utf-8"?> <resources> <style name=&q ...

  9. typedef与define的区别

    1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,只有在编译已被展开的源程序时才会发现可能的错误并报错.例如:#define PI 3.1415 ...

  10. js中的call()与apply()

    js中的call()函数和apply()函数: 1.主要作用:是用于指定作用域和传参 (1)用于指定作用域 window.color = "red"; var o = { colo ...