一、HTML表格

a.基本知识

1.table标签

2.tr标签

3.td和th标签

b.练习

1.代码

2.运行

3.分析

4.感悟

c.案例

1. 效果：

2.分析

注意：以上tr正确写法应该<tr>,以此类推。

一、HTML表格

a.基本知识

1.table标签

声明一个表格（关于表格的代码全部放在这个标签里面），它的常用属性如下：

border属性定义表格的边框，设置值是数值

cellpadding属性定义单元格内容与边框的距离，设置值是数值（内间距）

cellspacing属性定义单元格与单元格之间的距离，设置值是数值（外间距）

align属性设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right默认左对齐

height设置高度

width设置宽度

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1px" width=500px height=300px align="center" ></table></body>
</html>

以上代码只是用table定义了一个表格，其中边框为1像素，宽高，水平居中。

2.tr标签

定义表格中的一行

3.td和th标签

定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

colspan 设置单元格水平合并，设置值是数值

rowspan 设置单元格垂直合并，设置值是数值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1px" width=500px height=300px align="center"><tr><td></td><td></td><td></td></tr></table></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表格</title></head><body><h1>表格</h1><table border="1px" width=300px height=200px align="center"><!-- 声明一个表格由其开头和结尾border设置边框像素,里面的高宽是设置总的高宽 align设置水平方向对齐方式默认先左对齐属性之间隔开空格就行--><tr><!-- 声明一行h --><td align="center">1</td><!-- 画格子 --><td>2</td><td>3</td></tr><tr><!-- 声明一行h， valign设置垂直对齐--><td valign="top" align="center">1</td><!-- 画格子 --><td>2</td><td>3</td></tr><tr><!-- 声明一行h --><th>1</th><!-- th标签表头：默认水平垂直居中加粗 --><th>2</th><th>3</th></tr></table></body>
</html>
<!-- 想要在页面画表格 -->

b.练习

1.代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>案例</title></head><body><table border="1" height='300' width="700" align="center"><tr><td colspan="5" align="center" >基本情况</td><!-- colspan="5"水平合并 --></tr><tr><td width="15%"></td><td width="25%"></td><td width="15%"></td><td width="25%"></td><td rowspan="5" width="20%"><img src="../../../images/person.png" alt="人物图片"></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body>
</html>

2.运行

3.分析

从运行结果来看表格一共有6行每行有5列

所以大致的思路是6个tr标签每一个tr包5个td

而本代码思路是在第一行的时候定义5列其余代码可以只定义4列

4.感悟

当我们在第一行定义了格子3列时，后面只要定义一行就自动是三列，无需进行再定义

c.案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>个人简历</title></head><body topmargin="0"><!-- 顶格 --><table align="center" height="800" width="800" border="0" cellpadding="0" cellspacing="0"><!-- 实现边界消失 --><!--  cellpadding="20" cellspacing="20" --><!-- cellpadding:表格中格子里面的内容离格子本身各边线的距离 --><!-- 格子与格子之间的距离cellspacing --><tr><td width="260" valign="top" bgcolor="#f2f2f2"><table width="200" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td height="100"></td></tr><tr><td align="right"><img src="../../../images/person.png" alt="人物图片"></td></tr><tr><td align="right"> 张达山</td></tr><tr><td align="right">13326489976</td></tr><tr><td align="right">5642316548@qq.com</td></tr></table></td><td width="30"></td><td width="480" valign="top"><table width="480" border="0" cellpadding="0" cellspacing="0"><tr><td height="80"></td></tr><tr><td align="right"><img src="../../../images/resume.png" alt="个人简历背景"></td></tr></table><br><hr><br><table width="480" height="200" border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2" ><b>个人基本情况</b></td></tr><tr><td><b>姓 名：</b>张达山</td><td><b>籍 贯：</b>北京昌平</td></tr><tr><td><b>性 别：</b>男 </td><td><b>身 高：</b>175cm</td></tr><tr><td><b>民 族：</b>汉</td><td><b>体 重：</b>70kg</td></tr><tr><td><b>出生日期</b>：1992.03.28</td><td><b>电 话：</b>18210898888</td></tr><tr><td><b>现居住地</b>：昌平天通苑</td><td><b>专 业：</b>工业设计</td></tr></table><br><br><table width="480" height="80" border="0" cellpadding="0" cellspacing="0"><tr><td><b>教育背景及工作经历</b></td></tr><tr><td><b>2008.09-2011.06</b>北京邮电大学 工业设计专业</td></tr><tr><td><b>2011.06-2012.09</b>北京微创信息科技有限公司 任前端开发工程师</td></tr></table><br><br><table width="480" height="80" border="0" cellpadding="0" cellspacing="0"><tr><td><b>所获证书</b></td></tr><tr><td><b>2009年：</b>荣获“高级美术设计师”证书</td></tr><tr><td><b>2009年：</b>荣获“优秀班干部”证书</td></tr></table></td><td width="30"></td></tr></table></body>
</html>
<!--
布局的两个方式：
1.table布局---传统布局
2.html+css布局(DIV+CSS)-->

1. 效果：

2.分析

图1

从图1可知代码并没有给这一行的每一个设置高度，其默认高度是文字或图片自然撑开的。

br标签实现换行

hr标签实现水平线的绘制

二、总结

学习了table表格其中

1.<table width="" height="" align="" border="" ></table>

2.</br> </hr>

3.tr定义一行 td定义一列 th定义主列 <b></b>标签加粗

HTML学习之路-03HTML表格、table布局相关推荐

我的前端学习之路＜表格表单标签＞
1,表格标签<table> 作用:用来展示数据 <table> /**表格**/<tr> /**行**/<th></th> /**表头单元格 ...
html标签学习日记之（表格table）
基本格式: <table><thead><tr><th>姓名</th><th>年龄</th><th>性别 ...
WPF学习之路（十一）布局
布局 Canvas 基本面板,传统布局方式,支持与设备无关的坐标定位元素 <Border BorderThickness="2" BorderBrush="Blac ...
html网页 table布局实例,HTML用Table表格对网页布局
HTML是用于开发网页的"超文本标记语言",今天我们一起来学习一下HTML+CSS网页布局中Table布局方式. 常见的网页布局用CSS而言一般有经典行布局.经典列布局.双飞翼布局 ...
javaWeb学习第一天 ------HTML和table表格
javaWeb学习第一天学习内容前端介绍: html :超文本标记语言 html创建: html的一些规范: html的发展史: html开发的工具: html文档的格式: html的注释: ht ...
html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？
Table布局和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
【编程学习】每天进步一点点，编程学习之路：一款表格数据处理软件 - CSV表格数据处理器v1.0.1
[编程学习]每天进步一点点,编程学习之路:一款表格数据处理软件 - CSV表格数据处理器v1.0.1 写在前面1:软件编写缘由在读研实习期间,因为公司时常有处理大量表格数据的需求,加上自己有一些Py ...
html表格左右布局,css table布局大法，解决你大部分居中、多列等高、左右布局的问题...
1.table的一些特性与表现形式虽然table布局因为它的一些非语义化.布局代码冗余,以及不好维护改版等缺点被赶出了布局界.但是在css不给力时期,table布局也曾风靡一时,就算现在看来tabl ...
Qt学习之路_12(简易数据管理系统)
原文地址为: Qt学习之路_12(简易数据管理系统) 前言最近从大陆来到台湾,之间杂事很多,挤不出时间来更新博客- 这次主要是通过做一个简易的数据库管理系统,来学习在Qt中对数据库,xml,界面的各 ...

HTML学习之路-03HTML表格、table布局

一、HTML表格

a.基本知识

1.table标签

2.tr标签

3.td和th标签

b.练习

1.代码

2.运行

3.分析

4.感悟

c.案例

1. 效果：

2.分析

二、总结

HTML学习之路-03HTML表格、table布局相关推荐

最新文章

热门文章