HTML基础篇之表格的运用
<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基础篇之表格的运用的更多相关文章
- form表单那点事儿(上) 基础篇
form表单那点事儿(上) 基础篇 做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了fo ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- sql基础篇
再跟SQL谈一谈--基础篇 1.简介 2.DDL & DML 3.SELECT ①DISTINCT ②WHERE ③AND & OR ④ORDER BY 4.INSERT 5.UP ...
- PLSQL存储过程(基础篇)-转
我不是专门的开发人员,但存储过程又是很重要的知识,为了能够很好的记忆,现把这些基础知识总结一下.存储过程可以实现代码的充分共享,提高系统性能. 基础篇 知识回顾 如果经常使用特定操作,哪么 ...
- 转:.NET基础篇——反射的奥妙
反射是一个程序集发现及运行的过程,通过反射可以得到*.exe或*.dll等程序集内部的信息.使用反射可以看到一个程序集内部的接口.类.方法.字段.属性.特性等等信息.在System.Reflectio ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
- python面试题库——1Python基础篇
第一部分 Python基础篇(80题) 为什么学习Python? 语言本身简洁,优美,功能超级强大,跨平台,从桌面应用,web开发,自动化测试运维,爬虫,人工智能,大数据处理都能做 Python和Ja ...
- Sass-学习笔记【基础篇】
最下边附结构图 在线编辑器网址如下:http://sassmeister.com/ 注意编写的时候,符号千万别用了中文的:.:.....之类的,会报错,Sass也转换不成css. less和sass ...
- 基础篇:3.4)3d模型绘制的好坏会影响产品合格率(注意点)
本章目的:为了量产品的产能与合格率,重视3d图纸. 1.前言 作者希望本文能引起重视,是那些刚入行业的菜鸟: 还有只用2d图纸,便能绘制出能量产合格品的前辈大牛工程师. 2.3d图纸不合格的现状及典型 ...
随机推荐
- Go - 字典(map)
字典是一种内置的数据结构,用来保存 键值对 的 无序集合. (1)字典的创建 1) make(map[KeyType] ValueType, initialCapacity) 2) make(map[ ...
- 记录一下git 的常用命令
以后如果要写一个东西,最好先搭建一个本地仓库,用版本控制对其进行操作,可能一开始有一些麻烦,但是很有可能会受益无穷. 说到git,必然会和github联系起来. 不管是在ubuntu里面还是在Wind ...
- 核型SVM
(本文内容和图片来自林轩田老师<机器学习技法>) 1. 核技巧引入 如果要用SVM来做非线性的分类,我们采用的方法是将原来的特征空间映射到另一个更高维的空间,在这个更高维的空间做线性的SV ...
- NVelocity介绍,NVelocity中文手册文档及实例下载
NVelocity是什么velocity英音:[vi'lɔsiti]美音:[və'lɑsətɪ]近在做一个项目,客户要求有网站模板功能,能够自主编辑网站的风格,因为这个系统是为政府部门做子站系统,举个 ...
- 解决Can't connect to MySQL server on 'localhost' (10048)
解决Can't connect to MySQL server on 'localhost' (10048) 您使用的是Windows操作系统,此错误与一个注册表键值TcpTimedWaitDelay ...
- 当你在浏览器地址栏输入一个URL后回车,将会发生的事情?
原文:http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ 作为一个软件开发者,你一定会对网络应用如何工作有 ...
- preparestatement可以避免注入
之所以PreparedStatement能防止注入,是因为它把单引号转义了,变成了\',这样一来,就无法截断SQL语句,进而无法拼接SQL语句,基本上没有办法注入了. 不使用这个,我们一般做查询或更新 ...
- Java内部类详解
Java内部类详解 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能用到的场景不多,用得最多的是在有事件监听的情况下,并且即使用到也很少去总结内部类的用法.今天我们就 ...
- eclipse中如何安装插件ADT及SDK工具
1.如何在eclipse中安装ADT 首先下载ADT Plugin 下载地址: http://tools.android-studio.org/index.php/adt-bundle-plugin ...
- thinkphp 3.23语言包加载
模块home: 1.config 里添加 配置 //'配置项'=>'配置值' 'LANG_SWITCH_ON' => true, // 开启语言包功能 'LANG ...