HTML表格的学习.md

最新推荐文章于 2024-04-16 17:16:44 发布

小梦新靓

最新推荐文章于 2024-04-16 17:16:44 发布

阅读量672

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_43712187/article/details/89281666

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

表格格式

<table>
	<tr>
	  <td></td>
	</tr>
</table>

table代表这这是一个表格
—属性：
1、width代表表格的宽
2、height：代表表格的高
3、border：代表表格的边框必须写的属性不想让表格显示就写0就欧克
4、bgcolor：给表格设置颜色
5、background：被表格设置背景图片背景
6、cellpadding：表格内部内容距离边框的距离这个可以设置文字的水平位置
7、align：设置表格在浏览器显示的水平位置,主要有三个值left center right 分别表示左、中、右三种对齐方式
8、bordercolor：表格边框的颜色
9、cellspacing：表格中单元格与单元格的距离
10、rules：表格内部分隔线属性,它有三个值(cols,rows,none)，当rules=cols时，表格会隐藏横向的分隔线，也就是我们只能看到表格的列；当 rules=rows时，就隐藏了纵向的分隔线，也就是我们只能看到表格的行；而当rules=none时，纵向分隔线和横向分隔线将全部隐藏，我们就只能看到一个表格的外框了。
tr代表行
–属性：
1、bgcolor：行的背景颜色
2、border 内容行的边框宽度
3、background 内容行的背景图象
4、align 整行内容的水平对齐方式,主要有三个值left center right 分别表示左、中、右三种对齐方式
5、valign 整行内容的垂直对齐方式，主要有三个值top middle bottom 分别表示上、中、下三种对齐方式
6、bordercolor 内容行的边框颜色
td代表列
–属性：
1、width 单元格的宽度
2、height 单元格的高度
3、bgcolor 单元格的背景颜色
4、border 单元格的边框宽度
5、background 单元格的背景图象
6、align 单元格内容的水平对齐方式，主要有三个值left center right 分别表示左、中、右三种对齐方式
7、valign 单元格内容的垂直对齐方式，主要有三个值top middle bottom 分别表示上、中、下三种对齐方式
10、colspan 单元格横向跨越所占的格数
11、rowspan 单元格纵向跨越所占的格数数
其他标签

<th></th>元素定义表格内的表头单元格.有文本加粗居中的作用
<caption>表格标题</caption>
元素展示一个表格的标题， 它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面

正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。我们的技巧是在单元中插入一个 no-breaking 空格。
no-breaking 空格是一个字符实体。如果您不清楚什么是字符实体，请阅读关于字符实体的章节。
no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")。

表格里面可以嵌套一些其他标签

<html>

<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <p>这是另一个段落。</p>
  </td>
  <td>这个单元包含一个表格：
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>
</body>
</html>

在这里插入图片描述

表格应用

可以利用表格左一些比较简单的网页布局（在我们看到的网页中，基本上都用到了表格，这样使我们的网页看起来更简洁，更清晰，能够让我们快速找到我们需要的信息，所以，表格的设计对于我们的网页排版是相当重要的。）
可以制作一些简单的表格
利用表格做表单比较美观

table的thead等
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。

tbody包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就"从头到脚"显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

<table> 
    <thead> 
        <tr> 
        <th>这是在thead->tr->th里面</th> 
            <td>这是在thead->tr->td里面</td> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <th>这是在thead->tr->th里面</th> 
            <td>这是在thead->tr->td里面</td> 
        </tr> 
    </tbody> 
    <tfoot> 
        <tr> 
            <th>这是在thead->tr->th里面</th> 
            <td>这是在thead->tr->td里面</td> 
        </tr> 
    </tfoot> 
</table> 
<table>

thead和tbody含有tfoot都可以省略但是table不可以
<thead>标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组，而 tbody 元素用于对 HTML 表格中的主体内容进行分组。

注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。

详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

th和 thead的区别
这两个标签其实是完全不同的, 只是它们的前面两个字母相同而已, 一个是用来表示单元格的, 一个是用来表示表格的 head部分的. 不能认为 th所在的行就是 thead. th下面的行就是 tbody. thead中同样可以包含含有 th的行tr
关于caption
caption标签, 一定要放在 table标签内部才有效, 才有意义, 否则, 在table之外, 单独的一个caption标签, 就相当于一个 span而已

教程说 caption标签一定要紧接着 table标签放置, 但是在firefox和ie中测试, 只要 caption标签放在table内部, 无论哪里都可以.

如果设置了table的style border, 这个caption 是居于table的 border 边框线外部的在边框线之外的! 你可以把 caption看成是input元素的 label 标签一样…

也不像教程上说的 thead, tbody, tfoot 三个标签一定要同时出现…

小梦新靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格的学习.md

表格格式<table> <tr> <td></td> </tr></table>table代表这这是一个表格—属性：1、width代表表格的宽2、height：代表表格的高3、border：代表表格的边框必须写的属性不想让表格显示就写0就欧克 4、bgcolor：给表格设置颜色5、backgr...
复制链接

扫一扫

专栏目录