`

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

    html基础1 html教程

    html编程简介HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档。

    HTML的基础

    HTML基础1

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

    python 零基础学习篇

    html基础html基础html基础html基础

    html基础html基础html基础html基础html基础html基础html基础html基础

    HTML基础.pdf

    HTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdfHTML基础.pdf

    html基础代码,html+css教程

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 0 Strict//EN" " http://www w3 org/TR/xhtml1/DTD/xhtml1-strict dtd "&gt;代表文档类型,大致的意思就是:遵循严格的XHTML1的格式书写 具体文档类型后面有介绍(见文档类型),...

    学习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基础.ppt

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

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

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

    HTML基础.xmind

    HTML基础.xmind

    HTML基础笔记

    HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记

    html基础加强html基础加强

    html基础加强html基础加强html基础加强html基础加强html基础加强html基础加强

    HTML基础.docx

    HTML基础 HTML基础 HTML基础 HTML基础 HTML基础

    html基础教程 HTML基础

    html基础教程,html基础教程 HTML基础,html基础教程 HTML基础,适合初学者借鉴学习。学习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的基础学习...

    HTML基础

    HTML基础 ppt

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

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

Global site tag (gtag.js) - Google Analytics