每个表格都是由 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格式写。表格可以容纳很多东西。

  1. <!doctypy html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>标题</title>
  6. </head>
  7. <body>
  8.           <table border="1" cellpadding="10">
  9.                   <tr>
  10.                         <td>第一</td>
  11.                         <td>排</td>
  12.                   </tr>
  13.                   <tr>
  14.                         <td>第二</td>
  15.                         <td>排</td>
  16.                   </tr>
  17.           </table>
  18. </body>
  19. </html>

border是边框的意思，调节外部边框大小。cellpadding是补白的意思，可以调节单元格和文字之间的距离，设置之后可以增加点美观。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>如何添加单元格之间的距离</title>
  6. </head>
  7. <body>
  8.            <table border="1" cellspacing="10" >
  9.                      <tr>
  10.                              <td>第一</td>
  11.                              <td>排</td>
  12.                      </tr>
  13.                      <tr>
  14.                              <td>第二</td>
  15.                              <td>排</td>
  16.                      </tr>
  17.            </table>
  18. </body>
  19. </html>

　　cellspacing就是用来调解单元格与单元格之间的距离。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.           <meat charset="utf-8">
  5.           <title>图片颜色与图片背景</title>
  6. </head>
  7. <body>
  8. <table border="1"  cellpadding="15"
  9. style="background:url(./images/图片.jpg) no-repeat scroll 0 0 red;"
  10. >
  11.            <tr>
  12.                  <td>春</td>
  13.                  <td>夏</td>
  14.            </tr>
  15.             <tr>
  16.                   <td>秋</td>
  17.                   <td>冬</td>
  18.             </tr>
  19. </table>
  20. </body>
  21. </html>
    这个我采用了css的格式写的一个表格颜色与背景的形式style表示定义样式，用处比较多
    background:url(./images/图片.jpg)  这个括号要写进去，里面是我图片的一个位置
    no-repeat scroll 0 0 red 是颜色的背景，如果只需要颜色不要背景用bgcolor=“颜色”
    2种可以放在一起，只需要一种删除掉另一种就可以了。
  1. <!doctype html>
  2. <html>
  3.          <head>
  4.                 <meta charset="utf-8">
  5.                 <title>每月消费表</title>
  6.          </head>
  7.          <body>
  8.                  <table border="1" width="400">
  9.                              <tr>
  10.                                     <th align="left">消费项目</th>
  11.                                     <th align="right">一月</th>
  12.                                     <th align="right">二月</th>
  13.                              </tr>
  14.                             <tr>
  15.                                     <td align="left">衣服</td>
  16.                                     <td align="right">￥251.10</td>
  17.                                     <td align="right">￥51.10</td>
  18.                             </tr>
  19.                             <tr>
  20.                                     <td align="left">生活用品</td>
  21.                                     <td align="right">￥210.10</td>
  22.                                     <td align="right">￥80.10</td>
  23.                             </tr>
  24.                             <tr>
  25.                                     <td align="left">食物</td>
  26.                                     <td align="right">￥600.10</td>
  27.                                     <td align="right">￥730.10</td>
  28.                             </tr>
  29.                             <tr>
  30.                                     <th align="left">总计</th>
  31.                                     <th align="right">1061.30</th>
  32.                                     <th align="right">861.30</th>
  33.                             </tr>
  34.                  </table>
  35.          </body>
  36. </html>

width是宽度的意思，在表格头部写入。

align是对齐的意思，left是向左对齐，right是向右对齐。

这样看起来就有顺序，不会乱七八糟了。

  1. <！doctype html>
  2. <html>
  3.       <head>
  4.              <meta charset="utf-8">
  5.              <title>可移动的框架</title>
  6.       </head>
  7.       <body>
  8.              <p>”frame“属性来控制围绕表格的边框</p>
  9.              <table frame="box">
  10.                     <tr>
  11.                            <th>姓名</th>
  12.                            <th>零花钱</th>
  13.                     </tr>
  14.                     <tr>
  15.                            <td>金正恩</td>
  16.                            <td>￥100</td>
  17.                     </tr>
  18.              </table>
  19.              <p>box是完整的框架的属性值</p>
  20.              <table frame="above">
  21.                     <tr>
  22.                           <td>普京</td>
  23.                           <td>￥100</td>
  24.                     </tr>
  25.                     <tr>
  26.                           <td>奥巴马</td>
  27.                           <td>￥100</td>
  28.                     </tr>
  29.              </table>
  30.              <p>above是框架在上的意思</p>
  31.              <table frame="below">
  32.                     <tr>
  33.                          <td>叶良辰</td>
  34.                          <td>￥100</td>
  35.                     </tr>
  36.                     <tr>
  37.                          <td>王思聪</td>
  38.                          <td>￥100</td>
  39.                     </tr>
  40.              </table>
  41.              <p>below是框架在下的意思</p>
  42.              <table frame="hsides">
  43.                    <tr>
  44.                          <td>罗玉凤</td>
  45.                          <td>￥100</td>
  46.                    </tr>
  47.                    <tr>
  48.                          <td>犀利哥</td>
  49.                          <td>￥100</td>
  50.                    </tr>
  51.              </table>
  52.              <p>hsides是上下两框架的意思</p>
  53.              <table frame="vsider">
  54.                    <tr>
  55.                          <td>至尊宝</td>
  56.                          <td>￥100</td>
  57.                    </tr>
  58.                    <tr>
  59.                          <td>紫霞</td>
  60.                          <td>￥100</td>
  61.                    </tr>
  62.              </table>
  63.              <p>vsider是框架在左右的意思</p>
  64.       </body>
  65. </html>

　　

HTML 表格入门的更多相关文章

  1. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  2. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  3. AngularJS快速入门指南08：表格

    ng-repeat指令非常适合用来显示表格. 在表格中显示数据 在AngularJS中显示表格非常容易: <div ng-app="myApp" ng-controller= ...

  4. Jqgrid入门-使用模态对话框编辑表格数据(三)

            Jqgrid是一个强大的表格插件,它提供了多种方式来编辑数据.这三种方式分别是: Cell Editing——只允许修改某一个单元格内容 Inline Editing——允许在jqGr ...

  5. Jqgrid入门-显示基本的表格(一)

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的.         特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及 ...

  6. Bootstrap入门（四）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  7. ABP入门系列（14）——应用BootstrapTable表格插件

    ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)--分页实现讲解了如何进行分页展示,但其分页展示仅适用于 ...

  8. HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

    上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...

  9. Bootstrap入门（2）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

随机推荐

  1. HTML与CSS入门——第十章 创建用于Web上的图像

    知识点: 1.选择图像软件的方法 2.准备用于网上的照片的方法 3.创建标题和按钮的方法 4.减少图像中颜色数量的方法 5.创建透明图像的方法 6.创建平铺背景的方法 7.创建Web动画的方法 10. ...

  2. Asp.net MVC4 捆绑和压缩

    减少加载JavaScript和css文件加载时间 减少http请求次数和数据大小 无需配置 允许自定义和扩展

  3. Android的启动模式

    启动模式简单地说就是Activity启动时的策略,在AndroidManifest.xml中的<Activity>标签的android:launchMode属性设置: 启动模式有4种,分别 ...

  4. DBHerperl类

    using System; using System.Collections.Generic; using System.Text; using System.Data; using System.D ...

  5. 数据库分库分表(sharding)系列(一)拆分实施策略和示例演示

    本文原文连接: http://blog.csdn.net/bluishglc/article/details/7696085 ,转载请注明出处!本文着重介绍sharding切分策略,如果你对数据库sh ...

  6. HBase -ROOT-和.META.表结构(region定位原理)

    在HBase中,大部分的操作都是在RegionServer完成的,Client端想要插入,删除,查询数据都需要先找到相应的RegionServer.什么叫相应的RegionServer?就是管理你要操 ...

  7. 转载： js jquery 获取当前页面的url,获取frameset中指定的页面的url（有修改）

    转载网址:http://blog.csdn.net/bestlxm/article/details/6800077 js jquery 怎么获取当前页面的url,获取frameset中指定的页面的ur ...

  8. Scala学习笔记--隐式转换

    隐式转换的规则:1.无歧义规则:隐式转换唯有不存在其他可插入转换的前提下才能插入  若编译器有两种方法修正x+y 如convert1(x)+y,convert2(x)+y,会报错2.单一调用规则:只尝 ...

  9. chart画图

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  10. The Contiki build system 编译系统

    The Contiki build system======================== The Contiki build system is designed to make it eas ...