CSS学习笔记----简单表格实现

最新推荐文章于 2024-05-23 17:56:03 发布
最新推荐文章于 2024-05-23 17:56:03 发布
阅读量355 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014548034/article/details/40891273
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css12table</title>
	<meta name="author" content="Administrator" />
	<!-- Date: 2014-10-29 -->
	<style type="text/css">
		*{
			font-size:12px;
		}
		body{
			padding:50px;
		}
		table.ha{
			border-bottom: 1px #000 solid;
			border-left: 1px #000 solid;
		}
		table.ha td{
			border-right: 1px #000 solid;
			border-top: 1px #000 solid;
			text-align: center;
			height:30px;
		}
		table.ha thead{
			background:#a32;
			color:#fff;
		}
		tr.odd_line{
			background:#aaa;
		}
	</style>
</head>


<body>
	<table width="900px" cellpadding="0px" cellspacing="0px" class="ha">
		<thead>
		<tr >
			<td>用户姓名</td>
			<td>用户标识</td>
			<td>用户代码</td>
			<td>用户id</td>
			<td>用户密码</td>
		</tr>
		</thead>
		<tr class="odd_line">
			<td>张三</td>
			<td>VIP</td>
			<td>034</td>
			<td>1189</td>
			<td>45673456</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>VIP</td>
			<td>034</td>
			<td>1189</td>
			<td>45673456</td>
		</tr>
		<tr class="odd_line">
			<td>张三</td>
			<td>VIP</td>
			<td>034</td>
			<td>1189</td>
			<td>45673456</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>VIP</td>
			<td>034</td>
			<td>1189</td>
			<td>45673456</td>
		</tr>
		<tr class="odd_line">
			<td>张三</td>
			<td>VIP</td>
			<td>034</td>
			<td>1189</td>
			<td>45673456</td>
		</tr>
		<tr>
			<td>张三</td>
			<td>VIP</td>
			<td>034</td>
			<td>1189</td>
			<td>45673456</td>
		</tr>
	</table>
</body>
</html>

庄公梦蝶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML和CSS创建一个表格，方便调用
iO747254055的博客
07-20 1万+
虽然用bootstrap可以很方便快捷的创建一个table表格， 但是对于初学者来说，学会如何用HTML和CSS创建一个好看的表格还是很有意义的。 第一张 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;table&lt
CSS学习笔记--表格
PRCORANGE的博客
07-29 158
表格边框 指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框： <style> table,th,td { border:1px solid black; } </style> 请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。 <style> table { border-collapse: collapse; }
CSS学习笔记-常用表格标签
qq_44653420的博客
12-05 455
CSS学习笔记-表格标签 常用表格标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签</title> </head> <body> <table width="400px" border = "1px" align = "center"> <thead>
CSS-基础-MDN文档学习笔记
qq_57508808的博客
02-16 1264
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容CSS 中的书写模式是指文本的排列方向是横向还是纵向的可以使用进行属性间的切换：块流向从上至下，对应的文本方向是横向的：块流向从右向左，对应的文本方向是纵向的：块流向从左向右，对应的文本方向是纵向的属性实际上设定的是页面上块级元素的显示方向，而这决定了文本的方向。
CSS 学习笔记 - 网格布局（栅格系统）
湖边的小屋圣迹
10-06 3729
CSS 学习笔记 - 网格布局（栅格系统）开启网格模式名词解释属性说明容器属性内容元素属性效果展示参考资料 网格布局（栅格系统） 官方解释：CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。 像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。 个人理解： 要说这个栅格系统玩过地图编辑器的同学
css-知识点（学习笔记）
dgayuiafahf的博客
05-05 869
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
CSS-布局-MDN文档学习笔记
qq_57508808的博客
02-19 1556
正常布局流是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式当你使用 css 创建一个布局时，你正在离开正常布局流下列布局技术会覆盖默认的布局行为display属性，如blockinlinegridflex浮动，应用float值position属性表格布局多列布局Flexbox 是 CSS 弹性盒子布局模块（Flexible Box Layout Module）的缩写它被专门设计出来用于创建横向或是纵向的一维页面布局。
前端学习笔记-HTML、CSS、Javascript基础知识
m0_53527658的博客
04-17 329
采用前后端分离技术开发。
css display属性-学习笔记
weixin_45085122的博客
11-15 73
css display属性
Java学习笔记-个人整理的
12-19
{1.11}简单算法}{38}{section.1.11} {1.11.1}打乱算法}{38}{subsection.1.11.1} {1.11.2}排序算法}{38}{subsection.1.11.2} {1.11.2.1}选择排序}{38}{subsubsection.1.11.2.1} {1.11.2.2}冒泡排序}{39}{...
HTML_CSS学习笔记.docx
07-15
基本的HTML操作，来自IMOOC的学习笔记。 1 1. HTML介绍 4 1.1. HTML与CSS的关系 4 1.2. 标签 4 1.3. HTML5文档结构 5 1.4. head标签 7 1.5. body标签 8 1.6. html注释 8 2. HTML5语义化标签 8 2.1. 语义化 8 2.2. ...
WebDriver-xpath和WebDriver-Css学习
06-15
讲述了WebDriver-xpath和WebDriver-Css的学习摘要笔记，对于初学者还是很有用的，我也是转载的
Bootstrap基本样式学习笔记之表格(2)
01-21
Bootstrap实现了大量基本样式，包括表格、表单、按钮、图片等。基本的使用方法是通过添加特定的class来实现。 Bootstrap 提供了一个清晰的创建表格的布局。 0x01 表格样式 （1）基本样式：不带边框和分割线： <...
HTML设计模式日常学习笔记整理
01-21
HTML设计模式学习笔记 本周我主要学习了HTML的设计模式，现将我的学习内容总结如下： 一．盒模型的学习 CSS中有一种基础的设计模型叫做盒模型，它定义了元素是如何被看做盒子来解析的。我主要学习了六种盒模型，分别...
移动端/PC端布局-flex布局
微木
05-22 106
flex布局详解
前端 CSS 经典：3D 渐变轮播图
weixin_64684095的博客
05-23 402
前言：无论什么样式的轮播图，核心 JS 实现原理都差不多。所以小伙伴们，还是需要了解一下核心 JS 实验原理的。
CSS常用的两种定位方式
最新发布
代码有点萌的博客
05-23 345
relative定位是相对自身原始位置进行偏移。absolute定位是相对于最近的已定位（relativeabsolutefixedsticky）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。相对自身原始位置进行偏移。元素仍占据原始位置的空间。用于微调元素位置，不会影响其他元素的布局。脱离文档流，相对于最近的已定位祖先元素进行定位。不占据空间，其他元素会忽略它的位置。用于精确定位元素，通常与relative定位的祖先元素配合使用。
Web开发——HTML&CSS
一切皆是定数的博客
05-20 384
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
CSS学习------强制换行与不换行
08-11
CSS中，可以使用`white-space`属性来控制文本的换行方式。 如果要强制换行，可以将`white-space`属性设置为`normal`或者`pre-wrap`。`normal`会根据容器的宽度自动换行，而`pre-wrap`会保留原始的换行符，并在需要...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值