html表格属性

最新推荐文章于 2021-07-18 14:16:02 发布
最新推荐文章于 2021-07-18 14:16:02 发布
阅读量100 收藏 1
点赞数
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BeLoved_Code/article/details/103699808
版权

文章目录


在这里插入图片描述

设置单元格之间的间隔

未加cellspacing之前
在这里插入图片描述
cellspacing=“0px”
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--两行三列-->
		<!--th是列标签 -->
		<table border="1" align="center" width="400px" cellspacing="0px">
			<tr>
				<th>姓名</th>
				<th>智力值</th>
				<th>武力</th>
			</tr>
			<tr>
				<td>诸葛亮</td>
				<td>98</td>
				<td>60</td>
			</tr>
		</table>
	</body>
</html>

设置单元格边框与文字之间的距离

跨行合并与跨列合并

跨行合并，合并的是列
跨列合并，合并的是行
在这里插入图片描述
跨行合并-------合并最后一列
在这里插入图片描述

<table border="1" align="center" width="400px" cellspacing="0px">
			<tr>
				<th>姓名</th>
				<th>智力值</th>
				<th>武力</th>
			</tr>
			<tr>
				<td>诸葛亮</td>
				<td>98</td>
				<td rowspan="3">60</td>
			</tr>
			<tr>
				<td>诸葛亮</td>
				<td>98</td>
			</tr>
			<tr >
				<td>诸葛亮</td>
				<td>98</td>
			</tr>
		</table>

跨列合并-------合并最后一行
在这里插入图片描述

<table border="1" align="center" width="400px" cellspacing="0px">
			<tr>
				<th>姓名</th>
				<th>智力值</th>
				<th>武力</th>
			</tr>
			<tr>
				<td>诸葛亮</td>
				<td>98</td>
				<td>60</td>
			</tr>
			<tr>
				<td>诸葛亮</td>
				<td>98</td>
				<td>60</td>
			</tr>
			<tr >
				<td colspan="3">诸葛亮</td>
			</tr>
		</table>

合并居中小例子

居中 align=“center”
在table标签里是表格居中
在tr或td里是文字居中
th自动居中
在这里插入图片描述

<table border="1" width="600px" cellspacing="0px" align="center">
			<caption>三国武力值</caption>
			<tr align="center">
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>武力值</th>
			</tr>
			<tr align="center">
				<td>0001</td>
				<td>吕布</td>
				<td>男</td>
				<td>700</td>
			</tr>
			<tr align="center">
				<td>0002</td>
				<td>赵云</td>
				<td>男</td>
				<td rowspan="2">800</td>
			</tr>
			<tr align="center">
				<td>0003</td>
				<td>马超</td>
				<td>男</td>
			</tr>
			<tr align="center">
				<td>总武力</td>
				<td colspan="3"></td>
			</tr>
		</table>
小杨与bug的斗争
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表格属性、表单属性
Chico_D的博客
06-02 614
一、表格的标签及属性 1.表格table属性 属性 功能解释 Width、height 设置宽高，单位是像素（px）或百分比 align 定义表格对齐方式 border 设置外边框厚度 bgcolor 设置表格背景颜色 background 设置背景图片 Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0 Cellpadding 单元格边距（表格边框与内容的距离） 一般情况写0 2.表格table的行（tr）属性 属性 功能解释
html表格
我爱美女S的博客
10-13 3640
第二天 table是表格，form是表单域 表单由三部分组成： 表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性 别等完整的用户信息记录； 表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓 名； 提示信息：提示用户每一个表单控件是收集什么信息的。 表格的主要作用是以行、列的方式（表格）整齐地展示数据 三个基本的表格标签：table 表格标签，用于包含多个 tr；tr 定义表格中的行，用于包含多个 td；td 定义表格中的单元格，用于存放单元格内容。
关于HTML表格属性详解
ofshitao的博客
07-18 3645
表格 表格< table>标签中属性有 属性名 属性值 描述 align left、center、right 规定表格相对周围元素的对齐方式。（不推荐使用，用样式代替） bgcolor 颜色名字或颜色二进制代码 规定表格的背景颜色。（不推荐使用，用样式代替） border 1或者其他" " 规定表格单元是否拥有边框，默认为" "，表示没有边框。 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素。 cellspacing 像素值 规定单元格
HTML表格属性跨列,HTML表格的使用 与 跨行跨列
weixin_31179927的博客
06-04 4846
表格的基本语法：第一个单元格的内容第二个单元格的内容第一个单元格的内容第二个单元格的内容创建表格一般分为下面四个步骤1.创建表格标签table2.在表格标签table创建行标签tr可以有多行3.在第一行标签tr里创建单元格标签th可以创建表格标题4.在行标签tr里创建单元格标签td可以有多个单元格为了显示表格的轮廓，一般还需要设置table标签的border边框属性，指定边框的宽度代码示例：效果图...
HTML之表格属性
qq_46179838的博客
11-23 1039
HTML之表格一、定义二、表头的位置在哪里呢？三、表格的一些其他属性四、练习 一、定义 表格由 <table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 <td>指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格
HTML表格属性讲解
09-03
HTML表格属性讲解 HTML表格属性是HTML的基本组成部分，用于显示表格数据。表格属性可以控制表格的边框、背景颜色、单元格间距等多个方面。下面是HTML表格属性的详细讲解： 一、表格边框魔鬼教程 表格边框可以通过...
HTML制作表格.ppt
11-15
本章节将介绍HTML制作表格的相关知识点，以便读者能够快速掌握HTML表格的制作方法和美化技巧。 一、为什么使用表格？ 表格是HTML文档中的一种常见结构，广泛应用于网页上的文本和图像存放。它可以将数据以表格形式...
漂亮的表格css+html
04-20
首先，HTML表格的基本结构包括`<table>`标签，它定义了一个表格。表格由`<tr>`（行）标签组成，每一行中又包含`<th>`（表头）和`<td>`（数据单元格）标签。例如： ```html 表头1 表头2 数据1 数据2 `...
分页返回类PageResult
寨板p45黑苹果10.12.6
05-26 1474
1、实现序列化接口 2、返回数据的rows属性，为了确保传递不同类型的数据，要设置为泛型（其他实体类也都要实现序列化接口） 3、无参和有参构造方法 public class PageResult implements Serializable { private Long total; private List<?> rows; public PageResult() { } public PageResult(Long total, List&lt
前端显示数据库为datetime类型的字段为时间戳（改为字符串）
寨板p45黑苹果10.12.6
03-26 980
修正前1234567891234 后端修正 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") startdate数据库字段类型为datetime 但是也有不适用的情况 这种加注解的方法不适用于java实体类名称和数据库字段名不一致的情况下，但是可以使用前端修正 前端修正 显示效果为2020-3-25 0:0:0 f...
JavaScript循环定时器和计数器
寨板p45黑苹果10.12.6
12-27 612
文章目录基本概述每隔1秒count自加并弹出值定时器加计数器的应用 基本概述 JavaScript计时事件：一个设定的时间间隔之后来执行代码 setInterval()间隔指定的毫秒数不停地执行指定的代码 setInterval方法在创建一个定时器的同时，还会返回一个的定时器的ID，该ID就代表这个定时器 clearInterval()中止定时器执行的操作 需要传进去一个定时器 每隔1秒count...
bootstrap点击展开
寨板p45黑苹果10.12.6
03-10 482
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" ...
三级下拉选择框——三级联动
寨板p45黑苹果10.12.6
05-18 456
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。 as前面为真实值，后面为显示值。 ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。 ng-options="item.id as item.name for item in selectItemCat1List" item in selectIte..
vue前端显示页码，java后端分页
寨板p45黑苹果10.12.6
01-08 430
文章目录初始版本升级版本 初始版本 实现了显示所有页码，点击相应页码拿到相应页码的数据 实质上是后端分页，前端只是显示页码、联调 不足：页码太多，也会逐个显示，不能跳转页码，没有选择中当前页码 <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <!DOCTYPE html> &lt...
jsp横向遍历数据
寨板p45黑苹果10.12.6
01-06 388
使用jquery或者vue从后台拿到数据后，foreach或者v-for遍历默认都是竖着遍历，怎么才能像如图所示的样式展示商品呢？ 其实很简单，只需要先设置好样式，在遍历数据就好 <div v-for="item in items"> <div style="border: 1px solid; width: 190px; height: 160px; float: left...
一次性验证码的生成及校验——Session的应用
寨板p45黑苹果10.12.6
01-16 360
文章目录前端html前端js——点击切换图片、校验验证码服务器端代码生成验证码校验验证码 为什么需要一次性验证码？ 一次性验证码即验证码即表单只能提交一次，第二次提交表单，原来的验证码失效，将无法提交表单，这样做可以减轻服务器压力，也可以防止表单的重复提交 前端html <div class="row"> <div class="col-xs-7"> <div...
JavaScript计数器
寨板p45黑苹果10.12.6
12-27 332
点击加号数值加1，减号数值减1 核心是innerHTML属性 innerHTML：属性设置或返回表格行的开始和结束标签之间的 HTML 如图数字显示的位置是span标签体里的内容 个人理解：可以设置并返回标签体的内容 设置：设置了span标签里的内容 返回：c被赋值成功 <!DOCTYPE html> <html> <head> <meta ch...
二级联动——学院、专业
寨板p45黑苹果10.12.6
01-31 324
根据不同学院来选择不同的专业 html部分 select标签的onchange属性 <div class="form-group form-inline" style="width: 600px;"> <label for="campus">学院</label> <select class="form-control" onchange="chan...
html表格属性及作用
最新发布
06-03
以下是一些常见的HTML表格属性及其作用： 1. border：用于设置表格边框的宽度。 2. cellpadding：用于设置单元格的内部填充。 3. cellspacing：用于设置单元格之间的空间。 4. width：用于设置表格宽度。 5. ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值