表格标签和表格布局

表格标签

<table> //表格标签:

<tr>    //行标签

<td>    //单元格

http://120.x5.x.x:8080/myhome/mytable.html

表格跨行或者跨列的效果:

跨行:

 <tr>
	<td align="center" colspan="2">北京</td>

    <!--<td align="center">上海</td>-->
 </tr>

跨列:
<tr>
<!--<td align="center">广州</td>-->
<td align="center" bgcolor="#00ff66">深圳</td>
</tr>

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
   <center>
      <!--th表示标头-->
      <th>这是一个表格示例</th>
      <!--table表格标签-->
	 <table border="1" width="600" height="50" cellspacing="0" cellpadding="0" bgcolor="#cc00cc">
	 <!--tr行标签 表示行-->
	  <!--td表示一个单元格-->
    <tr>
	<td align="center" rowspan="2">北京</td>

    <td align="center">上海</td>
	</tr>

	<tr>
	<!--<td align="center">广州</td>-->
	<td align="center" bgcolor="#00ff66">深圳</td>
	</tr>

	 </table>

   </center>
 </body>
</html>

跨行 下一个行标签少一个td 少一个单元格

跨列  同一个行标签少一个td 少一个单元格

///////////跨列效果:
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
   <center>
      <!--th表示标头-->
      <th>这是一个表格示例</th>
      <!--table表格标签-->
	 <table border="1" width="600" height="50" cellspacing="0" cellpadding="0" bgcolor="#cc00cc">
	 <!--tr行标签 表示行-->
	  <!--td表示一个单元格-->
    <tr>
	<td align="center" colspan="2">北京</td>

    <!--<td align="center">上海</td>-->
	</tr>

	<tr>
	<td align="center">广州</td>
	<td align="center" bgcolor="#00ff66">深圳</td>
	</tr>

	 </table>

   </center>
 </body>
</html>

使用表格来完成课程表:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
    <center>
     <th>xxx课程表</th>
	 <table border="1" width="600" height="400" cellspacing="0" cellpadding="0" >
	 <tr>
	     <td colspan="2">时间/星期</td>

		 <td>星期一</td>
		 <td>星期二</td>
		 <td>星期三</td>
		 <td>星期四</td>
		 <td>星期五</td>

	  </tr>

	   <tr>
	     <td rowspan="4">上午</td>

		 <td>1</td>
		 <td>英语</td>
		 <td>化学</td>
		 <td>语文</td>
		 <td>代数</td>
		  <td>代数</td>

	  </tr
	   <tr>

		 <td>2</td>
		 <td>物理</td>
		 <td>语文</td>
		 <td>英语</td>
		 <td>几何</td>
		  <td>化学</td>

	  </tr
	   <tr>

		 <td>3</td>
		 <td>地理</td>
		 <td>英语</td>
		 <td>代数</td>
		 <td>体育</td>
		  <td>物理</td>

	  </tr
	   <tr>

		 <td>4</td>
		 <td>体育</td>
		 <td>生物</td>
		 <td>几何</td>
		 <td>语文</td>
		  <td>语文</td>

	  </tr
	   <tr>
	     <td rowspan="3">下午</td>

		 <td>5</td>
		 <td>语文</td>
		 <td>历史</td>
		 <td> </td>
		 <td>英语</td>
		  <td>地理</td>

	  </tr

	   <tr>
		 <td>6</td>
		 <td>自习</td>
		 <td>自习</td>
		 <td></td>
		 <td>生物</td>
		  <td>历史</td>

	  </tr
	   <tr>

		 <td>7</td>
		 <td>自习</td>
		 <td>自习</td>
		 <td></td>
		 <td>生物</td>
		  <td>班会</td>

	  </tr
	 </table>
	</center>
 </body>
</html>

表格布局:

时间： 2024-11-05 19:28:13

表格标签和表格布局的相关文章

课时37.表格标签基本使用（理解）

表格标签是我们一个时代都代表,曾经在过去一段时间,我们大部分网站都是用表格来做的. 1.什么是表格标签? 表格标签的作用:用来给一堆数据添加表格语义,其实表格是一种数据的展现形式,当数据量非常大的时候,表格这种展现形式被认为是最为清晰的一种展现形式. 2.表格标签格式: 其实表格标签中的table代表整个表格,也就是一对table标签就是一个表格. 其实表格标签中的tr标签代表整个表格的一行数据,也就是说一对tr标签就是表格中的一行其实表格标签中的td标签代表表格中一行中的一个单元格,也就是说

HTML表格标签

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

网页的通用标签以及表格标签

今天学习了通用标签及其属性,以及利用表格标签去做简单的网页.其中利用表格做网页时,通过设计视图,不仅可以直观的布局整个网页的样式,结合代码视图,可以更高效的完成对网页的设计.今天下午,在做超链接的标签时,有一起学习的同学提到了如何去掉超链接下的下划线,之后几名同学相互请教,我也得知这个方法了,在<a></a>这个标签的属性中,添加style="text-decoration:none",便可去掉. 在做网页之前,需要构思好自己的设计框架,然后按顺序实施.通过标签

模拟表格 inline-block等高布局

表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构.但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制.所以我们希望有表格的展示效果,但不想用表格,于是就有了模拟表格. 对于HTML中的同级数据,我们更希望把它们放到一起.所以UL.LI的结构可以满足需求,UL就是整个表格,LI就是我们的单元格.对LI元素设置display:inline-block,让其并行排列.然后要让元素像表格一样就需要设置适当的宽度,比如下面的例子使用33.3

前端内容之HTML：HTTP协议、HTML中重要的标签、表格、表单等

什么是前端: 与用户直接打交道的,例如:手机电脑的界面什么是后端: 幕后操作者,不直接与用户打交道的 WEB服务的本质: 浏览器中输入网址回车发送了几件事? 1.浏览器朝服务端发送请求 2.服务端接收请求 3.服务端返回响应 4.浏览器接收响应按照相应的规则渲染给用户看. HTTP协议: 超文本传输协议规定了浏览器与服务端传输数据的格式四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端不保存用户状态,即使同一用户每次来都当

HTML中的表格标签

??表格是网页制作中使用最多的工具之一,在制作网页时,使用表格可以更清晰地排列数据.但是在实际制作过程中,表格更多用在网页布局的定位上.很多网页都是以表格布局的.这是因为表格在文本和图像的位置控制方面都有很强的功能. 表格的基本构成表格由行.列.和单元格3部分组成,一般通过3个标记来创建,分别是表格标记<table>.行标记<tr>.和单元格标记<td>.表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效

HTML基础-- 标签、表格

<html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body> 页面显示的内容 </body> </html> --结束标签  注释 body的属性: bgcolor 页面背景色 text 文字颜色(规定所有文本颜色) topmar

HTML基础—一般标签、常用标签和表格的应用

HTML基础（一）——一般标签、常用标签和表格

第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body> 页面显示的内容 </body> </html> --结束标签  注释 body的属性: bgcolor 页面背景色 text 文字颜色(规定所有文