W3school html 表格用法总结

html 5 表格用法总结

1. 表格标签

表格	描述
table	定义表格
caption	定义标题
th	定义表头
td	定义单元格

2. 应用实例

表格边框— "<table border=“1”

<!--1. 没有边框的表格-->
<h3>1.无框表格</h3>
<table><!--tr 表格的行--><tr><td>100</td><td>200</td><td>300</td></tr>
</table>
<h3>2.有框表格</h3>
<table border="1"><tr><td>400</td><td>500</td><td>600</td></tr>
</table>

2. 表格表头 <th 标签

<h3>3.表格中的表头</h3>
<!--tr表格中每行，th 表格中表头分为横向表头和纵向表头, td 单元格中的内容-->
<table border="1"><!--横向表头，表头和数据分开，单独添加在tr中--><tr><th>姓名</th><th>电话</th><th>年龄</th></tr><tr><td>灵儿</td><td>000</td><td>007</td></tr><!--纵行表头，和对应的数据放在同一行即tr中--><tr><th>电影</th><td>告白</td><td>画皮</td></tr><tr><th>国家</th><td>韩国</td><td>中国</td></tr><tr><th>类型</th><td>犯罪</td><td>志怪</td></tr>
</table>

3. 空单元格 &nbsp
设置边框时若单元格为空则不显示空单元格的边框，可以使用 &nbsp 起到占位符的作用

<h3>4.空单元格</h3>
<table border="1"><tr><td>one</td><td>two</td></tr><tr><td>&nbsp</td><td>for</td></tr>
</table>

表格标题 <caption 标签

<h3>5.表格标题</h3>
<table border="2" style="background: coral"><caption>表1-5...</caption><tr><td>100</td><td>200</td><td>300</td><td>400</td></tr><tr><td>100</td><td>200</td><td>300</td><td>400</td></tr>
</table>

5. 合并单元格

colspan=“2” 横跨两列
rowspan=“2” 横跨两行

<h3>6.跨行跨列的单元格</h3>
<table border="1"><caption>横跨两列</caption><tr><th>姓名</th><th colspan="2" style="background: aquamarine">电话</th></tr><tr><td>anni</td><td>777</td><td>888</td></tr>
</table>
<table border="1"><caption>横跨两行</caption><tr><td>姓名</td><td>anni</td><td>anna</td></tr><tr><th rowspan="2" style="background: coral">电话</th><td>111</td><td>222</td></tr><tr><td>333</td><td>444</td></tr>
</table>

6. 表格嵌套

<h3>7.表格内的标签</h3>
<!--定义一个两行两列的表格，表格内部插入表格或列表或图片-->
<table border="1"><caption>一路向西，后会无期</caption><!--r1--><tr><!--c1 --><td ><p style="background: coral; font-family: 华文行楷;color:black">你最喜欢地方</p></td><!--c2插入表格表格里面插入图片--><td><table border="1"><tr><td><a name="h1"><img src="img/h1.jpg" border="1" width="80" height="60"></a></td><td><a name="h2"><img src="img/h2.jpg" border="1" width="80" height="60"></a></td></tr><tr><td><a name="h3"><img src="img/h3.jpg" border="1" width="80" height="60"></a></td><td><a name="h4"><img src="img/h4.jpg" border="1" width="80" height="60"></a></td></tr></table></td></tr><!--r2--><tr><!--c1--><td><u1><a href="#h1"><li>h1</li></a><a href="#h2"><li>h2</li></a><a href="#h3"><li>h3</li></a><a href="#h4"><li>h4</li></a></u1></td><!--c2--><td><p style="text-align: center">有时间就去看看吧</p></td></tr>
</table>

7. 单元格边距单元格内元素到边框的距离

cellpadding=“10”

<h3>8.单元格边距</h3>
<table border="1" ><caption>没有边距</caption><tr><td>one</td><td>two</td></tr><tr><td>sir</td><td>for</td></tr>
</table>
<br/>
<table border="1" cellpadding="10"><!--cellpadding 创建单元格内容与其边框之间的空白--><caption>有边距</caption><tr><td>one</td><td>two</td></tr><tr><td>sir</td><td>for</td></tr>
</table>

8. 单元格间距

cellspacing=“10”

<h3>9.单元格间距</h3>
<!--cellspacing 单元格之间的距离-->
<table border="1" ><caption>没有间距</caption><tr><td>one</td><td>two</td></tr><tr><td>sir</td><td>for</td></tr>
</table>
<br/>
<table border="1" cellspacing="10"><!--cellpadding 创建单元格内容与其边框之间的空白--><caption>有间距</caption><tr><td>one</td><td>two</td></tr><tr><td>sir</td><td>for</td></tr>
</table>
<br/>

9. 单元格对齐 align

<h3>10.单元格数据对齐方式</h3>
<table border="1" width="200"style="border: black;background: coral"><caption>通过 align 设置对齐方式</caption><tr><th align="left">消费项目</th><th align="right">一月份</th><th align="right">二月份</th></tr><tr><th align="left">衣服</th><td align="right">&yen200</td><td align="right">&yen300</td></tr><tr><th align="left">食物</th><td align="right">&yen320</td><td align="right">&yen400</td></tr><tr><th align="left">总计</th><td align="right">&yen520</td><td align="right">&yen700</td></tr>
</table>
<br/>

10. frame 属性

frame 控制表格边框

<h3>11.frame控制表格边框</h3>
<table frame="box"><caption>frame="box"</caption><tr><th>Month</th><th>Save</th></tr><tr><td>January</td><td>&yen100</td></tr>
</table>
<br/>
<table frame="above"><caption>frame="above"</caption><tr><th>Month</th><th>Save</th></tr><tr><td>January</td><td>&yen100</td></tr>
</table>
<br/>
<table frame="below"><caption>frame="below"</caption><tr><th>Month</th><th>Save</th></tr><tr><td>January</td><td>&yen100</td></tr>
</table>
<br/>
<table frame="hsides"><caption>frame="hsides"</caption><tr><th>Month</th><th>Save</th></tr><tr><td>January</td><td>&yen100</td></tr>
</table>
<br/>
<table frame="vsides"><caption>frame="vsides"</caption><tr><th>Month</th><th>Save</th></tr><tr><td>January</td><td>&yen100</td></tr>
</table>

3. 总结

表格边框
表格表头
空单元格
表格标题
合并单元格
表格嵌套
单元格边距
单元格间距
单元格对齐
frame属性

W3school html 表格用法总结相关推荐

jtable如何从表格中定位_Java Swing组件编程之JTable表格用法实例详解
本文实例讲述了Java Swing组件编程之JTable表格用法.分享给大家供大家参考,具体如下: 表格是GUI编程中使用较多,但也是最麻烦的一个控件之一.表格是用来显示二维数据,提供编辑,选择等功能 ...
EasyExcel导入和导出excel数据表格用法示例
说明:平时项目中经常有需要把excel表格中的数据导入库中,或者需要把查询出来的数据导出到excel文件中,今天就来介绍阿里的 easyexcel 的用法一.SpringBoot集成EasyExce ...
如何设置好看的form表单样式_网页开发之表格用法，该如何制作？
表格的主要作用 1 2 3.表格的具体用法: <table> <tr> <td>单元格内的文字td> ... tr> ... table> 1.& ...
Latex中的表格用法总结（三）——表格的合并分割，字体旋转，表头语句切割
写在前面的话无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程 https://w ...
Latex中的一些表格用法总结（二）——行列式的表格，表格的切分和合并
写在前面的话每天都做点像样的事情,每天都要保持像顶级程序员进阶的欲望,每天都做点顶级研究人员做的事情. 如果在看本文的时候有任何不懂的地方,请您告诉我,我一定帮您解答清楚. 这里我们就不针对没有任何 ...
表格方式：（表格用法，表格跨行和跨列）
表格 <table> //表格标签 <tr> //行标签,有几行就写几个 <td>第一个单元格内容</td> <td ...
PowerQuery的参数表格用法
目前我最常用到的场景是:当我将PowerQuery数据模板做好之后,其他不熟悉PowerQuery的伙伴只需要提供简单的输入--比如文件或文件夹路径--就可以自动生成结果. 场景再实例化一下:我做了一 ...
LaTeX 表格用法
LaTeX表格的实现方式有三种,包括:: 1. table 1.1 简单表格 \begin{table}[h]\centering\caption{} \label{}\begin{tabular}{ ...
Yii2 GridView 表格用法
Yii2框架下展示列表数据通常用Gridview来实现,这里整理常用的小技巧,方便以后查询使用 <?= GridView::widget(['dataProvider' => $dataP ...

W3school html 表格用法总结

html 5 表格用法总结

1. 表格标签

2. 应用实例

3. 总结

W3school html 表格用法总结相关推荐

最新文章

热门文章