HTML学习之 表格

最新推荐文章于 2024-05-30 19:41:18 发布
最新推荐文章于 2024-05-30 19:41:18 发布
阅读量1.3k 收藏 1
点赞数 2
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gsdxiaohei/article/details/82181935
版权

①表格标签

HTML表格标签
标签

意义

<caption>定义表格标题
<col>定义表格中列的属性
<colgroup>定义表格列的组
<table>定义表格
<tbody>定义表格主体
<td>定义表格单元
<tfoot>定义表格页脚
<th>定义表格表头
<thead>定义表格页眉
<tr>定义表格的行

②一个简单的表格

<!DOCTYPE html>
<html>
<body>
	<p>下面是一个简单的表格</p>
	<table border="1">
	<caption>简单的表格</caption>
	<tr>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>99</td>
	</tr>
	</table>
</body>
</html>

table 中的border属性值设为"1"表示该表格是一个有框的表格，如果改为<table border="0">：

③突出表头

上个例子中，表格中的数据都为普通的单元，而“姓名”所在行的内容作为他们各自列的标题，应该突显出来。

<tr>
	<th>姓名</th>
    <th>性别</th>
	<th>年龄</th>
</tr>

将需要设置为表头的内容用<th></th>标签包围，即可将表头内容加粗居中显示。

④让写入的内容横向排列

上面的例子中之所以内容会竖向排列，是因为表格的宽度自适应内容，保证宽度最小的同时汉字自动换行了，如果我们在加一个比较长的数据：

<!DOCTYPE html>
<html>
<body>
	<p>下面是一个简单的表格</p>
	<table border="1">
	<caption>简单的表格</caption>
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
		<th>电话</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>99</td>
		<td>123456789</td>
	</tr>
	</table>
</body>
</html>

可以发现电话那行是横向排列的。

但并不是只能增长单元格内容的长度来迫使它写在一行，我们可以自行设置表格单元格的宽度。

比如设置为"500px":

<table border="1" width="500px">

⑤跨行或列的单元格

<!DOCTYPE html>
<html>
<body>
	<p>跨列</p>
	<table border="1" width="500px">
	<tr>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
		<th>电话</th>
		<th colspan="2">绰号</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>男</td>
		<td>99</td>
		<td>123456789</td>
		<td>老张</td>
		<td>小三</td>
	</tr>
	</table>

	<p>跨行</p>
	<table border="1" width="500px">
	<tr>
		<th>姓名</th>
		<td>张三</td>
	</tr>
	<tr>
		<th>性别</th>
		<td>男</td>
	</tr>
	<tr>
		<th>年龄</th>
		<td>99</td>
	</tr>
	<tr>
		<th>电话</th>
		<td>123456789</td>
	</tr>
		<th rowspan="2">绰号</th>
		<td>老张</td>
	<tr>			
		<td>小三</td>
	</tr>
	</table>
	
</body>
</html>

 

⑥单元格内可以添加其它标签

<!DOCTYPE html>
<html>
<body>
	<table border="1" width="400px">
	<caption>单元格内可以添加其他标签</caption>
	<tr>
		<td width="200px">段落：
		<p>第一个段落</p>
		<p>第二个段落</p>
		</td>
		<td width="200px">一个表格：
		<table border="1">
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
		<tr>
			<td>3</td>
			<td>4</td>
		</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td width="200px">一个列表：
		<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		</ul>
		</td>
		<td width="200px">一般内容</td>
	</tr>
</body>
</html>

⑦单元格边距或间距

<!DOCTYPE html>
<html>
<body>
	<table border="1" width="100px">
	<caption>一般表格</caption>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
	<table border="1" width="100px" cellpadding="10">
	<caption>设置了边距后</caption>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
	<table border="1" width="100px" cellspacing="10">
	<caption>设置了间距后</caption>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</body>
</html>

⑧添加背景颜色或背景图像

<!DOCTYPE html>
<html>
<body>
	<table border="1" width="160px" bgcolor="blue">
	<caption>蓝色背景的表格</caption>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
	<table border="1" width="160px" background="./背景.jpg">
	<caption>背景图片填充的表格</caption>
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4</td>
	</tr>
</body>
</html>

⑨靠左或右排列内容

<!DOCTYPE html>
<html>
<body>
	<table border="1" width="140px">
	<caption>表格</caption>
	<tr>
		<td align="left">1</td>
		<td align="left">2</td>
	</tr>
	<tr>
		<td align="right">3</td>
		<td align="right">4</td>
	</tr>

</body>
</html>

10.框架属性

<html>
<body>
<p>frame="above":</p>
<table frame="above">
  <tr>
    <th>1</th>
    <th>2</th>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<p>frame="below":</p>
<table frame="below">
  <tr>
    <th>1</th>
    <th>2</th>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<p>frame="box":</p>
<table frame="box">
  <tr>
    <th>1</th>
    <th>2</th>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<p>frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>1</th>
    <th>2</th>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<p>frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>1</th>
    <th>2</th>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
</body>
</html>

Gsdxiaohei
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML5制作表格样式
09-27
在HTML5中，创建表格是一种常见的数据展示方式。本篇文章将详细介绍如何使用HTML5来制作一个美观、易于理解的表格，并通过CSS进行样式定制，使其更具...学习并掌握这些HTML和CSS技巧，将有助于提升你的网页设计能力。
HTML新手学习小记5（表格）
blood_yan的博客
09-12 694
table 表格 tr（TableRow） td（TableDate） 表格由单元格构成，有N个单元格横向组成单元行，M个单元行纵向堆叠组成表格： 实际的开发中，表格的对齐方式通常使用CSS样式进行控制，使用属性进行对齐控制的场合较少。 表格代码格式为： <table> <tr> <td>第1/1格</td> <td>第1/2格</td> <td>第1/...N格&
html+css实现左侧固定右侧横向滚动的表格（百度小程序中怎么写表格样式）
小R.的博客
12-15 1184
  最近在用百度小程序写项目，遇到一个问题，设计图中有个左侧固定右侧横向滚动的表格，查看小程序文档组件，并没有完全一致的。   倒是有个差不多的，乍看差不多，实则完全不一样，方向什么的都不同，且未提供更改方向等的属性方法，所以无奈之下只能手写。又发现并不支持table、th、td等，所以只能用 view 拼凑咯。   以下是我整理的一个小Demo，由百度小程序 view 写法改成了HTML中的 div 写法，可能有点简陋，但是自己还是蛮满意的，😄。   先来看样子，红色边框是我定的外部宽度。   再来上代
HTML表格基础
最新发布
dahongmao的博客
05-30 840
日常生活中，为了清晰地显示数据或信息，常常使用表格对数据或信息进行整理，同样在制作网页时，为了使网页中的元素有条理地显示，也可以使用表格对网页内容进行规划。标签用于定义表头单元格，其文本默认加粗居中显示，而标签定义的为普通单元格，其文本为普通文本且水平左对齐显示。表格的宽度和高度是自适应的，依靠表格内的内容来支撑，要想更改表格的尺寸，就需要对其应用宽度属性width和高度属性height。bgcolor 设置表格的背景颜色 颜色的英文单词、十六进制颜色值#RGB、RGB颜色值rgb(r,g,b)
table表格竖列横排显示
热门推荐
Little_Flower的博客
03-07 2万+
此段代码可以让表格的竖列变成横列显示，如果表格已经渲染好，此时需求需要你横排显示竖列的内容，就可以用到 先在HTML中写一个表格 &lt;table class="table table-bordered table-hover"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;产品名称&lt;/th&gt; &lt;th...
html复杂表格，横向多级表头，纵向多级表头，合并行或列
全易
08-06 2913
th标签有两个属性可用于占位： rowspan=“数字” 表示该单元格占 n行 colspan=“数字” 表示该单元格占 n列 <table class="table" cellpadding="1" cellspacing="1" border="1"> <tr> <th colspan="3" rowspan="2">用电分类</th> <!-- colspan="2" 表示这一列占2列 --> <t
html页面横竖表格,html表格，表头竖向固定，横向滚动的例子
weixin_42351189的博客
06-03 537
该楼层疑似违规已被系统折叠隐藏此楼查看此楼head:first-child+body thead[class].fixedHeader th {width: 200px}head:first-child+body thead[class].fixedHeader th + th {width: 250px}head:first-child+body thead[class].fixedHeade...
HTML制作表格.ppt
11-15
HTML制作表格 本章节将介绍HTML制作表格的相关知识点，以便读者能够快速掌握HTML表格的制作方法和美化技巧。 一、为什么使用表格？...通过本章节的学习，读者可以快速掌握HTML表格的制作方法和美化技巧。
漂亮的表格css+html
04-20
通过学习和实践这些示例，开发者可以掌握创建高效、优雅的HTML表格和CSS样式的技巧，提升网页设计的水平。 记住，优秀的表格设计不仅关注外观，也要考虑用户体验。清晰的布局、易读的字体、合理的色彩搭配以及对...
JS学习之表格的排序简单实例
12-28
JS学习之表格的排序简单实例 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> </head> <body> <input id=btn1 type=button value=...
HTML多表头表格代码
12-14
HTML中的表格是展示数据的一种常见方式，特别是...通过理解这段代码，我们可以学习到HTML表格的基本结构、表头单元格的跨行和跨列属性，以及如何用CSS美化表格样式。这对于网页设计和数据展示是非常基础且重要的技能。
html横向table,仿segmentfault-table横向滚动
weixin_39634067的博客
07-03 684
问题描述自己的博客在用移动端访问时，如果table的列数足够多会显示不全，如下图红圈所示正常情况如图解决过程使用chrome发现segmentfault的解决方法是在table上套一个table-wrap，如下图蓝色背景和红圈所示首先想到直接在table上套一个table-wrap即可接着查看别的table时发现并不是每一个table都被套上一个table-wrap，如下图所示，也就是说只有显示不...
HTML5UI横向排列,Element FORM结合Vue实现横向排列表单项
weixin_34254044的博客
06-18 1023
结合Vue实现横向排列表单项前言默认的，ElementUI的Form表单项(控件)是垂直排列，即一行显示一个表单项。但是在实际应用中，有时候会需要一行显示多个表单项。针对这类需求，笔者提供以下解决方案解决方案1、修改表单项.el-form-item样式如下，增加display属性，设置值为inline-block !important; 因为默认的，表单项为块元素，这样设置以后，可以让表单项变成内...
Html5-如何正确给table加边框
菲菲的博客
03-04 1万+
Html5-如何正确给table加边框分析单个属性的效果一、表格边框 border="1"二、cellspacing单元格间距三、cellpadding单元格边距四、去掉表格中table的所有属性值，在css中给table设置五、border-collapse: collapse 边框合并六、分析差别七、分析误区总结一下：Html中table的属性:总结来说，给表格加边框，有两种方式：【注意】 分...
web前端学习（八）——HTML5中表格、边框的相关标签设置
★★光亭★★
12-24 1万+
web前端学习（八）——HTML5中表格、边框的相关标签设置
html-表格＜table＞
qq_39111074的博客
04-21 335
表格标签 <table></table> ： 表格框架 <thead></thead> ： 表格头部 <tbody></tbody> ： 表格主体 <th></th> ：表头- - -加粗居中 <tr></tr> ：行 <td></td> ：列 表格常用属性 border:表格边框的宽度，eg:<table border=“1”>…&lt
html表格纵向变横向,html表格，表头竖向固定，横向滚动的例子
weixin_35319943的博客
06-02 791
该楼层疑似违规已被系统折叠隐藏此楼查看此楼head:first-child+body thead[class].fixedHeader th {width: 200px}head:first-child+body thead[class].fixedHeader th + th {width: 250px}head:first-child+body thead[class].fixedHeade...
html表格横向自动滚动,Html怎么实现table数据自动滚动
weixin_34722747的博客
05-30 2761
Html实现table数据自动滚动的方法：首先写一个table标签，引入样式标签style；然后给table一个class属性，再经过背景、宽度、高度的设计即可。本教程操作环境：windows7系统、html5版，DELL G3电脑。Html实现table数据自动滚动的方法：1、首先打开myeclipse获取idea这样的编辑器，在编辑器中写一个table标签，这里给出table的值。2、然后可以...
HTML表格标签符入门教程
"HTML入门学习，包括表格标签符的使用和基本HTML知识" 在HTML（超文本标记语言）中，学习基础知识至关重要，这包括了如何创建和测试网页，以及使用不同的标记符来影响网页内容的显示。HTML文件是独立于操作系统平台...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值