HTML 表格入门
每个表格都是由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
这样是一行三列:
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
这样是二行三列
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr></table>
border="1" 是边框的意思,1是最基本的边框。数字越大边框越粗。
不希望显示边框输入0就可以了。
<table border="1">
<caption>表格的标题</caption>
<tr>
<th>表头<th>
<td>单元格</td>
</tr>
<tr>
<th>表头</th>
<td>单元格</td>
</tr>
</table>
<th></th>这是表格的表头字体比较粗。用上面这种方式可以写垂直表格。
<caption></caption>表格标题的意思,在表格的正上方
<table border="1"> ,<table border="1">
<tr> <tr>
<th>姓名</th> <th>姓名</th>
<th colspan="2">电话</th> <td>金正恩</td>
</tr> </tr>
<tr> <tr>
<td>金正恩</td> <th rowspan="2">电话</th>
<td>38 38 383</td> <td>38 38 383</td>
<td>38 38 383</td> </tr>
</tr> <tr>
</table> <td>38 38 383</td>
</tr>
</table>
以上是两种表格的对比,colspan的意思是合并单元格,"2"的意思是占据2行
rowspan的意思是行,“2”同样是占据两行的意思,需要注意的是另td要用tr写一行才不会超过边框。
<table border="1">
<tr>
<td>
<p>表格里面可以放段落</p>
</td>
<td>表格里面还可以放表格
<table border="1">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d<td>
</tr>
</table>
</td>
</tr>
<tr>
<td>表格里面还可以放列表
<ol>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>东</li>
</ol>
</td>
<td><a href=http://www.baidu.com>表格真的非常大。</a><td>
</tr>
</table>
看得我都头晕了。下次还是用HTML格式写。表格可以容纳很多东西。
<!doctypy html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<table border="1" cellpadding="10">
<tr>
<td>第一</td>
<td>排</td>
</tr>
<tr>
<td>第二</td>
<td>排</td>
</tr>
</table>
</body>
</html>
border是边框的意思,调节外部边框大小。cellpadding是补白的意思,可以调节单元格和文字之间的距离,设置之后可以增加点美观。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何添加单元格之间的距离</title>
</head>
<body>
<table border="1" cellspacing="10" >
<tr>
<td>第一</td>
<td>排</td>
</tr>
<tr>
<td>第二</td>
<td>排</td>
</tr>
</table>
</body>
</html>
cellspacing就是用来调解单元格与单元格之间的距离。
<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>图片颜色与图片背景</title>
</head>
<body>
<table border="1" cellpadding="15"
style="background:url(./images/图片.jpg) no-repeat scroll 0 0 red;"
>
<tr>
<td>春</td>
<td>夏</td>
</tr>
<tr>
<td>秋</td>
<td>冬</td>
</tr>
</table>
</body>
</html>
这个我采用了css的格式写的一个表格颜色与背景的形式style表示定义样式,用处比较多
background:url(./images/图片.jpg) 这个括号要写进去,里面是我图片的一个位置
no-repeat scroll 0 0 red 是颜色的背景,如果只需要颜色不要背景用bgcolor=“颜色”
2种可以放在一起,只需要一种删除掉另一种就可以了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>每月消费表</title>
</head>
<body>
<table border="1" width="400">
<tr>
<th align="left">消费项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">¥251.10</td>
<td align="right">¥51.10</td>
</tr>
<tr>
<td align="left">生活用品</td>
<td align="right">¥210.10</td>
<td align="right">¥80.10</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">¥600.10</td>
<td align="right">¥730.10</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">1061.30</th>
<th align="right">861.30</th>
</tr>
</table>
</body>
</html>
width是宽度的意思,在表格头部写入。
align是对齐的意思,left是向左对齐,right是向右对齐。
这样看起来就有顺序,不会乱七八糟了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可移动的框架</title>
</head>
<body>
<p>”frame“属性来控制围绕表格的边框</p>
<table frame="box">
<tr>
<th>姓名</th>
<th>零花钱</th>
</tr>
<tr>
<td>金正恩</td>
<td>¥100</td>
</tr>
</table>
<p>box是完整的框架的属性值</p>
<table frame="above">
<tr>
<td>普京</td>
<td>¥100</td>
</tr>
<tr>
<td>奥巴马</td>
<td>¥100</td>
</tr>
</table>
<p>above是框架在上的意思</p>
<table frame="below">
<tr>
<td>叶良辰</td>
<td>¥100</td>
</tr>
<tr>
<td>王思聪</td>
<td>¥100</td>
</tr>
</table>
<p>below是框架在下的意思</p>
<table frame="hsides">
<tr>
<td>罗玉凤</td>
<td>¥100</td>
</tr>
<tr>
<td>犀利哥</td>
<td>¥100</td>
</tr>
</table>
<p>hsides是上下两框架的意思</p>
<table frame="vsider">
<tr>
<td>至尊宝</td>
<td>¥100</td>
</tr>
<tr>
<td>紫霞</td>
<td>¥100</td>
</tr>
</table>
<p>vsider是框架在左右的意思</p>
</body>
</html>
HTML 表格入门的更多相关文章
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...
- AngularJS快速入门指南08:表格
ng-repeat指令非常适合用来显示表格. 在表格中显示数据 在AngularJS中显示表格非常容易: <div ng-app="myApp" ng-controller= ...
- Jqgrid入门-使用模态对话框编辑表格数据(三)
Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...
- Jqgrid入门-显示基本的表格(一)
首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...
- Bootstrap入门(四)表格
Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
- ABP入门系列(14)——应用BootstrapTable表格插件
ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)--分页实现讲解了如何进行分页展示,但其分页展示仅适用于 ...
- HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
- Bootstrap入门(2)表格
Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
随机推荐
- MySQL的一些语法总结
初学MySQL,今天遇到了一个问题,然后汇总了一下MySQL的一些语法 1. date和datetime类型是不同的 date只记录日期(包括年月日),datetime记录日期和时间(包括年月日时分秒 ...
- 提高jQuery执行效率
1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...
- 初识CLR
眨眼间我已经实习了半年时间并且转正了,身份也正式从一个学生转变为一个职场人,这个博客自从开始实习以来就一直没有更新过= =没错,就是我懒癌晚期,不过不行!一切都要开始走向正轨,此博会继续见证我的成长, ...
- Creating a settings table that can handle almost any type of value
Update: Updated article here. Today I wanted to be able to have a table store any type of value as a ...
- HTML5简介、视频
HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独 ...
- 修补--Redis未授权访问漏洞
--------------------------------阿里云解决方案----------------------------------- 一.漏洞描述 Redis因配置不当可以导致未授权访 ...
- [1] Tornado Todo Day0
Github地址: day0 初始化数据库: jakeychen@JC:~/Public/tornado_todo$ pwd /home/jakeychen/Public/tornado_todo j ...
- python 远程统计文件
#!/usr/bin/python #encoding=utf-8 import time import os import paramiko import multiprocessing #统计文件 ...
- Hdu1091
#include <stdio.h> int main() { int a,b; while(scanf("%d %d",&a,&b)){ && ...
- Jasper_mainReport_excel html pdf 主报表中常用属性
jasper中,excel , html, pdf 一般可以使用相同的主报表和子报表.需要在主报表中添加不同格式对应的属性.导出不同格式的报表,编译器会将相应的属性应用到对应的报表格式中. 常用属性如 ...