<html>

<head>

<title></title>

</head>

<body>

<table border=”1”>

<tr>

<th>我是表头1</th>

<th>我是表头2</th>

</tr>

<tr>

<td>第一列第一个单元格</td>

<td>第一列第二个单元格</td>

</tr>

<tr>

<td>第二列第一个单元格</td>

<td>第二列第二个单元格</td>

</tr>

</table>

</body>

</html>

表格用的标签<table>,帮表格分行用<tr>；定义表格单元格<td>；<th> 定义表头；关于boeder这个会在等下讲表格的属性的时候会讲到。

这个是一个最简单的表格。你们可以这样理解<table>先创建一个空白的没有单元格的空表格，然后我们加入了X个tr和Y个td一个空白的空表格里面多了X列Y个单元格。X和Y分别是数字。然后我们在td里面加入自己的内容，一个简单的表格就生成了。

Table常用的属性

属性     属性值         理解

width         px、 %               指定表格的宽度

height        px、%             表格的高度

border           px             指定表格边框的宽度

cellpadding     px              指定边框与内容之间的空白

cellspacing    px、 %                 指定单元格之间的空白

align            left、 right 、 center     指定对齐方式

valign           top、 middle 、 bottom 垂直排列方式

Background=””             表格的背景图片

Bordercolor=””             表格边框的颜色

Bordercolorlight=””         亮边框的颜色

Bordercolordark=””                      暗边框的颜色

单元格合并属性

<td colspan=”x”></td>

Colspan:合并列单元格，x为要合并的列数。

<td rowspan=”x”></td>

Rowspan:合并行单元格，x为要合并的行数

合并在表格中如何运用

注：第一个为没有合并（为了让你们知道有哪些变化特地用了一个没有合并一个合并的）

<html>

<head>

<title></title>

</head>

<body>

<table border=”1”>

<tr>

<th>我是表头1</th>

<th>我是表头2</th>

</tr>

<tr>

<td >第一列第一个单元格</td>

<td >第一列第二个单元格</td>

</tr>

<tr>

<td>第二列第一个单元格</td>

<td>第二列第二个单元格</td>

</tr>

<tr>

<td>第三列第一个单元格</td>

<td>第三列第二个单元格</td>

</tr>

</table>

注：下面为合并的（合并了行单元格和列单元格）

<html>

<head>

<title></title>

</head>

<body>

<table border=”1”>

<tr>

<th>我是表头1</th>

<th>我是表头2</th>

</tr>

<tr>

<td colspan=”2”>第一列第一个单元格</td>

</tr>

<tr>

<td rowspan=”2”>第二列第一个单元格</td>

<td>第二列第二个单元格</td>

</tr>

<tr>

<td>第三列第二个单元格</td>

</tr>

</table>

注意：

合并的时候注意要把你写合并属性的那个单元格也要算上。不然合并会出现少合了一个。

列是表格从左往右，行是从上往下。（这句话结合表格看来看会清楚一点）

属性width、height、border、cellpadding、cellspacing的用法

<html>

<head>

<title></title>

</head>

<body>

<table border=”1”  width=”80%”  height=”100%”  cellpadding=”30px”  cellspacing=”20px” bordercolor=”#111000” bordercolorlight=”#00cc00” bordercolordark=”#cc00aa” background=”没有背景图片”>

<tr>

<th>我是表头1</th>

<th>我是表头2</th>

</tr>

<tr>

<td >第一列第一个单元格</td>

<td >第一列第二个单元格</td>

</tr>

<tr>

<td>第二列第一个单元格</td>

<td>第二列第二个单元格</td>

</tr>

<tr>

<td>第三列第一个单元格</td>

<td>第三列第二个单元格</td>

</tr>

</table>

大家可以复制一下之前表格的代码和上面这个代码看看有哪些变化。width是网页的所占宽度为百分之80，height高度为百分之100，这个属性我暂时较少用到还有后面的Bordercolorlight、Bordercolordark。

表格这里需要理解透彻不然在后面用表格编辑网页会经常出来错误。要多注意！！

HTML基础篇之表格的运用的更多相关文章

  1. form表单那点事儿(上) 基础篇

    form表单那点事儿(上) 基础篇 做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了fo ...

  2. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  3. sql基础篇

    再跟SQL谈一谈--基础篇   1.简介 2.DDL & DML 3.SELECT ①DISTINCT ②WHERE ③AND & OR ④ORDER BY 4.INSERT 5.UP ...

  4. PLSQL存储过程（基础篇）-转

    我不是专门的开发人员,但存储过程又是很重要的知识,为了能够很好的记忆,现把这些基础知识总结一下.存储过程可以实现代码的充分共享,提高系统性能. 基础篇       知识回顾 如果经常使用特定操作,哪么 ...

  5. 转：.NET基础篇——反射的奥妙

    反射是一个程序集发现及运行的过程,通过反射可以得到*.exe或*.dll等程序集内部的信息.使用反射可以看到一个程序集内部的接口.类.方法.字段.属性.特性等等信息.在System.Reflectio ...

  6. Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较

    说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...

  7. python面试题库——1Python基础篇

    第一部分 Python基础篇(80题) 为什么学习Python? 语言本身简洁,优美,功能超级强大,跨平台,从桌面应用,web开发,自动化测试运维,爬虫,人工智能,大数据处理都能做 Python和Ja ...

  8. Sass-学习笔记【基础篇】

    最下边附结构图 在线编辑器网址如下:http://sassmeister.com/  注意编写的时候,符号千万别用了中文的:.:.....之类的,会报错,Sass也转换不成css. less和sass ...

  9. 基础篇：3.4）3d模型绘制的好坏会影响产品合格率（注意点）

    本章目的:为了量产品的产能与合格率,重视3d图纸. 1.前言 作者希望本文能引起重视,是那些刚入行业的菜鸟: 还有只用2d图纸,便能绘制出能量产合格品的前辈大牛工程师. 2.3d图纸不合格的现状及典型 ...

随机推荐

  1. PHP header函数使用大全

    PHP header函数大全 header('Content-Type: text/html; charset=utf-8'); header('Location: http://52php.cnbl ...

  2. Multiload-ng

    导读 Multiload-ng是一个 GTK2 图形化系统监视器应用,可集成到 Xfce.LXDE 及 MATE 的桌面面板中, 它 fork 自原来的 GNOME Multiload 应用.它也可以 ...

  3. iOS UIStackView的理解

    iOS9 提供的UIStackview简化了布局操作,它有些像Android中的liner layout.以前不用UIStackview也是可以做出类似的效果的,不过要添加许多的约束,看得头都大了,使 ...

  4. ASP.NET MVC随想录——锋利的KATANA

    正如上篇文章所述那样,OWIN在Web Server与Web Application之间定义了一套规范(Specs),意在解耦Web Server与Web Application,从而推进跨平台的实现 ...

  5. jdbc连接数据库（mysql，sqlserver，oracle）

    package com.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepare ...

  6. 全选、取消、2级 checkbox的选中切换

    需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未 ...

  7. Core Data使用

    注意:每次修改CoreData的Attribute时记得把应用给删除重装,要不会崩,因为建立的数据库文件还在该目录下,里面的字段没有更改,所以不能匹配就会崩溃,切忌,要不就每次进来把文件先删除,再建立 ...

  8. 【转】Java开发中JDBC连接数据库代码和步骤总结

    (转自:http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html) JDBC连接数据库 创建一个以JDBC连接数据库的程序,包含7个 ...

  9. 工欲善其事-Maven介绍与使用

    Maven是什么? Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设,Maven使用标准的目录结构和默认构建生命周期. 在 ...

  10. RSA的傻瓜原理

    设想一下,这种场景,你处在一个狭小的房间里,房间之中有一共有三个人,你是其中一个,你们之间被玻璃隔开,两两对视,现在给另外两个人起个名字叫小红.小明.你和他们通讯只能用写字板来展示给对方(简单起见,只 ...