`

HTML基础1

    博客分类:
  • css
 
阅读更多

表格布局基本不再使用,但DIV+CSS布局的很多知识跟表格布局类似,所以这里还是复习下。把代码贴出来。

<html>
	<head>
		
	</head>
	<body>
	<center>
		<ol start="3">
		    <li>细线表格:用背景色来当成表格线,表框设为0</li>
			<table width="600" bgcolor="black" cellspacing="1" cellpadding="5">
				<tr bgcolor="white">
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr bgcolor="white">
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr bgcolor="white">
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>基本表格</li>
			<table width="600" border="1" bordercolor="black" cellspacing="0" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>默认表格</li>
			<table width="600"  cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>双线表格</li>
			<table width="600" border="1" bordercolor="black" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>合并单元格1</li>
			<table width="600" border="1" bordercolor="black" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td colspan="2">1.2</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td rowspan="2">2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>合并单元格2</li>
			<table width="600" border="1" bordercolor="black" cellpadding="5">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td colspan="2">2.1</td>
					<td rowspan="2">2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>凸起表格(bordercolorlight下右属性和bordercolordark上左属性)</li>
			<table width="600" border="1" cellpadding="5" bordercolor="blue" bgcolor="gray">
				<tr>
					<td bordercolorlight="black" bordercolordark="white">1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
			<li>有表格边框,无单元格边框(table的frame和rules属性)</li>
			<table width="600" cellpadding="5" border="3" bordercolor="#9ED18E" rules="none" cellspacing="0">
				<tr>
					<td>1.1</td>
					<td>1.2</td>
					<td>1.3</td>
				</tr>
				<tr>
					<td>2.1</td>
					<td>2.2</td>
					<td>2.3</td>
				</tr>
				<tr>
					<td>3.1</td>
					<td>3.2</td>
					<td>3.3</td>
				</tr>
			</table>
			<br/>
			<br/>
		</ol>
	</center>
	</body>
</html>

 

分享到:
评论

相关推荐

    day01html基础1总结.xmind

    day01html基础1总结.xmind

    python 零基础学习篇web前端开发基础Html基础1 html的介绍 .mp4

    python 零基础学习篇

    html基础学习资料

    这个"html基础学习资料"压缩包提供了对于初学者来说非常宝贵的资源,可以帮助他们快速掌握HTML的基本概念和语法。 首先,`html.chm` 文件可能是一个帮助文档,通常包含详细的信息和例子,指导用户学习HTML的各种...

    学习html基础.zip

    学习html基础学习html基础学习html基础学习html基础学习html基础 学习html基础学习html基础学习html基础学习html基础学习html基础 学习html基础学习html基础学习html基础学习html基础学习html基础 学习html基础学习...

    HTML基础学习.zip

    HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML基础学习HTML基础学习HTML基础学习HTML基础学习 HTML...

    HTML基础知识点汇总

    HTML 基础知识点汇总 HTML(Hypertext Markup Language,超文本标记语言)是网页设计的基础语言,它将影像、声音、图片、文字等连接显示出来。HTML 语言使用标记式的指令(Tag),将网页文件组织起来,并由浏览器...

    HTML基础.ppt

    HTML基础 教大家了解学习HTML的课件

    HTML5基础入门全套视频课程.rar

    HTML5是构建Web内容的一种语言描述方式。...HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。

    HTML基础.xmind

    HTML基础.xmind

    html基础教程学习

    html基础教程学习

    html基础ppt

    html基础

    HTML5Canvas基础教程

    资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...

    html的基础学习.zip

    html的基础学习html的基础学习html的基础学习html的基础学习 html的基础学习html的基础学习html的基础学习html的基础学习 html的基础学习html的基础学习html的基础学习html的基础学习 html的基础学习html的基础学习...

    HTML5基础知识核心技术与前沿案例

    资源名称:HTML5基础知识 核心技术与前沿案例内容简介:HTML5基础知识 核心技术与前沿案例《HTML5基础知识、核心技术与前沿案例 》是一本引导初、中级学习者深入了解并有效掌握HTML5核心技巧的技术实战书籍,全书...

    尚硅谷前端入门html+css零基础教程,零基础前端开发html5+css3视频尚品汇项目源码

    1. HTML基础知识:了解HTML的基本结构,如何创建元素,以及如何组织网页内容。 2. HTML5新特性:掌握新的HTML5元素,以及如何利用它们来增强网页的功能和用户体验。 3. CSS样式规则:学习选择器、属性和值,学会控制...

    html基础ppt下载

    掌握HTML基础知识是创建静态网页的第一步,随着技能的提升,你还可以学习CSS(Cascading Style Sheets)来控制网页的样式,以及JavaScript和服务器端技术来实现更复杂的交互功能。通过不断实践和学习,你可以成为一...

    HTML基础学习示例代码.zip

    HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例代码HTML基础学习示例代码HTML基础学习示例代码 HTML基础学习示例...

Global site tag (gtag.js) - Google Analytics