上一篇讲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. Entity Framewor 学习笔记 (Enum)

    EF 6 支持Enum 的处理 首先说一下 mysql 和 sql server 的区别 mysql 是有 Enum 这个类型的 , insert 时是放入 int , 出来的时候它会是 string ...

  2. 淺析LED、LED背光、OLED的技術原理與區別

    眼下很多廠商在推廣自己產品的時候都偷換了概念.明明是LED背光顯示器卻要簡稱為LED顯示器.事實上LED顯示器和目前的LED背光顯示器有著本質的區別.當然容易讓大家混淆的還有個技術非常先進的OLED. ...

  3. Intel hex 文件格式解密

    Intel hex 文件常用来保存单片机或其他处理器的目标程序代码.它保存物理程序存储区中的目标代码映象.一般的编程器都支持这种格式. Intel hex 文件全部由可打印的ASCII字符组成(可以用 ...

  4. json转换为键值对辅助类

    /// <summary> /// json转换为键值对辅助类 /// </summary> public class JsonParser { private static ...

  5. Resharper TAB 傻吊

    直接把tools中的模板全选删除掉!

  6. 面试问题：关于java并发方面的

    主要是回答一下面试中可能会碰到的问题.慢慢的积累一下.一个星期以后,补全.

  7. java与数据结构(3)---java实现循环链表

    循环链表:将单链表中尾结点的指针由空指针改为指向头结点,就使整个单链表形成一个环,这种首尾相接的单链表称为单链表循环表,即循环链表. 循环链表与单链表最重要的区别是:尾结点的指针,不再是p->n ...

  8. vmware vms migration to openstack

    Converting a VMware Workstation virtual machine to KVM Leave a commentPosted by rbgeek on August 13, ...

  9. 联系我们_你我想法_【有男度】UNANDU 100%进口 全球设计师品牌精汇 男装_男装搭配_时尚男装_品牌男装_男装搭配技巧_男装网站

    联系我们_你我想法_[有男度]UNANDU 100%进口 全球设计师品牌精汇 男装_男装搭配_时尚男装_品牌男装_男装搭配技巧_男装网站 联系我们 2012-02-17   国内北京公司总部  邮编 ...

  10. java中 SSL认证和keystore使用

    java中 SSL认证和keystore使用 2013-10-12 11:08 10488人阅读 评论(0) 收藏 举报   目录(?)[+]     好久没用过SSL认证了,东西久不用,就有点生疏. ...