HTML简单表格

最新推荐文章于 2023-12-14 17:12:21 发布
最新推荐文章于 2023-12-14 17:12:21 发布
阅读量759 收藏 7
点赞数 3
文章标签： Java HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33534113/article/details/90727102
版权
一个小demo,用于记录学习过程,效果如下

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
	margin: 0 auto;
	margin-top: 15%
}

table.main tbody tr td input {
	width: 80px;
	border: #CCCCCC 1px solid;
}

input,table.main{
	text-align: center;
}
</style>
</head>
<body>
	<center>
		<table style="table-layout: fixed; width: 40%" border="1"
			cellspacing="1" cellpadding="1" class="main">
			<tbody>
				<tr>
					<td width="4%" colspan="2">时间</td>
					<td width="5%">星期一</td>
					<td width="5%">星期二</td>
					<td width="5%">星期三</td>
					<td width="5%">星期四</td>
					<td width="5%">星期五</td>
				</tr>
				<tr>
					<td rowspan="4" width="25%">上午</td>
					<td width="5%">1
					<td width="5%"><input type="text" value="语"/></td>
					<td width="5%"><input type="text" value="数"/></td>
					<td width="5%"><input type="text" /></td>
					<td width="5%"><input type="text" /></td>
					<td width="5%"><input type="text" /></td>
				</tr>
				<tr>
					<td width="5%">2</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td width="5%">3</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td width="5%">4</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td colspan='7' width="40%">休息</td>
				</tr>
				<tr>
					<td rowspan='4' width="5%">下午</td>
					<td>5</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td width="5%">6</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td width="5%">7</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td width="5%">8</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td rowspan='1' width="5%">晚上</td>
					<td>9</td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
					<td><input type="text" /></td>
				</tr>
			</tbody>
		</table>
	</center>

</body>
</html>
打野不要来
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【HTML】如何使用html制作一个简易的表格？
萌萌白白的博客
02-16 4562
如何使用html制作一个简易的表格
html 简单表格制作（看了它足以应对大部分表格）
yunduan__的博客
11-14 1万+
首先制作一个表格我们要知道一张简单表格是由二部分组成分别是表头，表身。 下面就是一个简单的表格。 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。如下图 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> &lt...
HTML——表格
三三木木七的博客
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
HTML基础：表格（初学者必看）
2302_76420691的博客
02-06 1338
表格 「1. 表格」 现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。 「2. 创建表格」 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> table、tr、td，他们是创建表格的基本标签，缺一不可
Web前端-HTML（表格与表单）
apple_73204060的博客
12-14 1333
表格与表单
HTML简单表格制作（购物）
最新发布
04-26
HTML简单表格制作（购物）
Python实现简单HTML表格解析的方法
09-21
主要介绍了Python实现简单HTML表格解析的方法,涉及Python基于libxml2dom模块操作html页面元素的技巧,需要的朋友可以参考下
html制作细线表格的简单实例
12-14
关于这个细线表格的制作方法，百度一下可能就会有答案告诉你设置这几个值：给table设置border="0" cellspacing="1" bgcolor="#990033"这几个值，还要给单元格单独设置背景色,例如：bgcolor="#fff"。但是关于为什么要...
简单表格CSS-HTML
02-16
简单表格CSS-HTML
HTML中Table表格的使用与漂亮的表格模板
pan_junbiao的博客
08-04 6万+
1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记表示整个表格。<ta...
HTML 表格 表单的制作
m0_60045654的博客
10-21 5650
表格是一种二维结构，横行纵列。表格由单元格组成。每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高。从服务器角度讲，收集用户的输入数据。从客户端角度来讲，向服务器提交数据的位置。本站搜索<input type="submit" name="button" id="button" value="搜索"></form>
HTML基础 - HTML表格
qq_45383769的博客
04-07 1万+
HTML基础 - HTML表格 1.无表头的表格 <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在html页面中的表格来着，就和excl的表格不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个表格。（设置了边框为1 ：border= “1”） 2.有表头的表格 <th> <th>表示就是表头了哦，字体是加粗居中显示的
HTML基础之创建简单表格
沃和莱特的博客
03-11 2013
HTML基础之创建简单的表单
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
HTML列表，表格，表单（简洁版）
m0_74854911的博客
03-31 919
你来自哪来自旋风星系的电子羊
【HTML】简单的表格设计
weixin_45500506的博客
08-09 1606
表格设计   <table></table>其中再往表格里深入的标签为<tr></tr>(tableRow)代表行，<td></td>(tableData)代表具体到某一个单元格。为了设计好看的表格，我们常用td标签里的colspan(跨列)，rowspan(跨行)来进行改变。有了这些基础知识能很快设计一个简单的表格。   但是如果设计不规则表格该如何设计呢？最近我做到练习题就遇到这样一个表格。总结了一种自己实用的手工过程来设计表格。
html语言制作表格模板,十个最简单实用的Table设计模板
weixin_39633455的博客
05-30 3672
表格恐怕是 Web 设计中最困难的一个对象了，感谢神秘的标记语言，有太多的细节我们需要关注了，而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素，但是它浪费了我们大量的时间。有人甚至说，标签是垃圾。其实表格本身并没有什么，是你自己使用的不当，把简单的事情弄的复杂了。这就是我写下本篇文章的原因，它将向你展示十个最简单表格设计方法。准备想必大家都知道 xhtml 1.0 strict 标准，下面是...
HTML创建表格
qq_51049931的博客
07-08 1万+
制作网页时，使用表格可以更清晰的排列数据，是网页制作中使用最多的形式之一。 一、创建并设置表格属性 1.表格的基本标记——table、tr、td 表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记） 行：表格中的水平间隔； 列：表格中的垂直间隔； 单元格：表格中行与列相交所产生的区域。 基本语法： ...
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 7万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
html简单网页代码 表格
05-27
好的，以下是一个简单的HTML表格代码示例： ```html <!DOCTYPE html> <html> <title>My Webpage 姓名 年龄 职业 张三 <td>25 工程师 李四 <td>30 教师 </...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值