HTML 表格实例

1.表格这个例子演示如何在 HTML 文档中创建表格。

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

2.表格边框
本例演示各种类型的表格边框。  ###border="1" 加粗和加深边框，值越大越好
<h4>带有普通的边框：</h4>
<table border="1">
<tr>
    <td>First</td>
    <td>ROW</td>
</tr>
<tr>
    <td>Second</td>
    <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

3.没有边框的表格
本例演示一个没有边框的表格。   border="1"  #等于1 是有边框的， 等于0  就没有边框了
<h4>这个表格没有边框</h4>
<table>
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
<tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
</tr>
</table>
<h4>这个表格也没有边框</h4>
<table border="0">
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
</table>

4.表格中的表头(Heading)
本例演示如何显示表格表头。
<h1>表格中的表头</h1>
<table border="1">
 <tr>
     <th>姓名</th>
     <th>电话</th>
     <th>性别</th>
 </tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td> 男</td>
</table>

<h4>垂直表头</h4>
<table border="1">
<tr>
    <th>姓名</th>
    <td>邹立翔</td>
</tr>
<tr>
    <th>电话</th>
    <td>1234545</td>
</tr>
<tr>
    <th>性别</th>
    <td>男</td>
</tr>
</table>

<h4>这个表格也没有边框</h4>
<table border="0">
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
</table>

32.带有标题的表格
本例演示一个带标题 (caption) 的表格
<h4>这个表格有一个标题，以及粗边框</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
</tr>
<tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
</tr>
</table>
33.跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。  ##colspan ="2" 跨两列
<h4>横向两列的单元格</h4>
<table border="1">
<tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
</tr>
<tr>
    <td>邹立翔</td>
    <td>123213</td>
    <td>223434</td>
</tr>
##################
<h4>横跨两行的单元格</h4>
<table border="1">
<tr>
    <th>姓名</th>
    <td>邹立翔</td>
</tr>
<tr>
    <th rowspan="2">电话</th>
    <td>2132432</td>
</tr>
<tr>
    <td>2434343</td>
</tr>
</table>
34.表格内的标签
本例演示如何显示在不同的元素内显示元素。
<table border="1">
<tr>
  <td>
   <p>这是一个段落。</p>
   <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>这个单元包含一个列表：
   <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

35.单元格边距(Cell padding)
本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。
<h4>没有 cellpadding</h4>
<table border="1">
<tr>
    <td>First</td>
    <td>ROW</td>
</tr>
<tr>
    <td>Second</td>
    <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding</h4>
<table border="1" cellpadding="10">
<tr>
    <td>First</td>
    <td>ROW</td>
</tr>
<tr>
    <td>Second</td>
    <td>Row</td>
</tr>
</table>

36.单元格间距(Cell spacing)
本例演示如何使用 Cell spacing 增加单元格之间的距离。
<h4>没有 cellspacing</h4>
<table border="1">
<tr>
    <td>First</td>
    <td>Row</td>
</tr>
<tr>
    <td>Second</td>
    <td>ROW</td>
</tr>
</table>
<h4>带有 cellspacing</h4>
<table border="1" cellspacing="10">
<tr>
    <td>First</td>
    <td>Row</td>
</tr>
<tr>
    <td>Second</td>
    <td>ROW</td>
</tr>

37.向表格添加背景颜色或背景图像
本例演示如何向表格添加背景。
<body>
<h4>背景颜色</h4>
<table border="1"
       bgcolor="red">
<tr>
    <td>First</td>
    <td>Row</td>
</tr>
<tr>
    <td>Second</td>
    <td>Row</td>
</tr>
</table>

<h4>背景图像</h4>
<table border="1"
       background="1.png">
<tr>
    <td>First</td>
    <td>Row</td>
</tr>
<tr>
    <td>Second</td>
    <td>Row</td>
</tr>
</table>

38.向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景。
<h4>单元背景</h4>
<table border="1">
<tr>
    <td bgcolor="red">First</td>
    <td>Row</td>
</tr>
<tr>
    <td background="1.png">
     Sedcond</td>
    <td>Row</td>
</tr>
</table>

39.在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
<table width="400" border="1">
<tr>
    <th align="left">消费项目</th>
    <th align="right">一月</th>
    <th align="right">二月</th>
</tr>
<tr>
    <td align="left">衣服</td>
    <td align="right">$241</td>
    <td align="right">$200</td>
</tr>
<tr>
    <td align="left">化妆品</td>
    <td align="right">$30</td>
    <td align="right">$40</td>
</tr>
<tr>
    <td align="f=left">食物</td>
    <td align="right">$730</td>
    <td align="right">$650</td>
</tr>
<tr>
    <th align="left">总计</th>
    <th align="right">$1200</th>
    <th align="right">$744</th>
</tr>
</table>

40.框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

HTML 表格实例的更多相关文章

W3School-CSS 表格实例
CSS 表格实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
VBA嘘嘘嘘(1)——将Excel数据填入到已存在的Word模板表格(实例应用)
傻瓜可以写出机器读懂得代码,但写出让人能读懂的代码的是优秀程序员 Sub 填充() Application.ScreenUpdating = False 'ScreenUpdating 是控制你的ex ...
servlet+ajax+json字符串后台传入，前端解析并把数据循环填入表格实例
写在前面:1.源代码来源于博客http://blog.sina.com.cn/u/2904067371 ,在此基础上对于前端代码稍作更改,把传过来的数据解析并传入表格2.json解析,用eval()3 ...
jquery 操作表格实例
案例1:隔行变色,滑动,点击变色以(选中取消效果)(addClass(),removeClass(),toggleClass()) Html: <h4>1.隔行变行</h4> ...
从json传递数据显示表格实例
@interface ViewController ()<UITableViewDataSource,UITableViewDelegate> { UITableView* table; ...
W3School-CSS 伪元素 (Pseudo-elements) 实例
CSS 伪元素 (Pseudo-elements)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin ...
W3School-CSS 伪类 (Pseudo-classes) 实例
CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...
W3School-CSS 定位 (Positioning) 实例
CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 ...

随机推荐

EJB2.0 ejb-jar.xml配置文件详解
<ejb-jar><!--EJB发布描述器的根元素,它包含一个可选的EJB-JAR文件的描述,可选显示的名称,可选小图标的文件名,可选的大图标的文件名,必须的所有被包含的enterp ...
c语言：复合文字
复合文字的意义,相当于是在C语言中,为数组类型定义了一种类似于8之于int,'w'之于char一样的常量类型,所以从C99之后,可以在一些地方使用复合文字来代替数组使用. 复合文字的声明 (]){,, ...
脱壳_01_虚拟机壳_VMP
写在前面的话: 上一篇文章中,带领大家一起分析了简单的压缩壳ASPACK,今天,就和大家一起来揭开VMP这道神秘的面纱: [花指令]:扰乱调试器的,并不执行: [混淆]:对原指令进行拆解或等价替换,会 ...
[2018HN省队集训D9T1] circle
[2018HN省队集训D9T1] circle 题意给定一个 \(n\) 个点的竞赛图并在其中钦定了 \(k\) 个点, 数据保证删去钦定的 \(k\) 个点后这个图没有环. 问在不删去钦定的这 \ ...
ffmpeg常用参数一览表
基本选项: -formats 输出所有可用格式 -f fmt 指定格式(音频或视频格式) -i filename 指定输入文件名,在linux下当然也能指定:0.0(屏幕录制)或摄像头 -y 覆盖已有 ...
Mapreduce运行过程分析(基于Hadoop2.4)——(二)
4.3 Map类创建Map类和map函数.map函数是org.apache.hadoop.mapreduce.Mapper类中的定义的,当处理每一个键值对的时候,都要调用一次map方法,用户须 ...
P4279 [SHOI2008]小约翰的游戏
嘟嘟嘟一道博弈论经典题,nim游戏. 只不过要考虑有奇数个石子为1的堆的时候,为Brother赢.剩下就是nim游戏了. 极简代码 #include<cstdio> using name ...
Mac svn使用学习-1-简介
在Windows环境中,可以使用TortoiseSVN来搭建svn环境.但是由于Mac自带了svn的服务器端和客户端功能,因此可以直接使用svn功能. svn即subversion,Subversio ...
asdm不能登录问题；浏览器必须是ie,不能是chrome或者firefox;java的版本，尤其是安全等级和例外需要调整
asdm不能登录问题:浏览器必须是ie,不能是chrome或者firefox;java的版本,尤其是安全等级和例外需要调整
linux-如何快速替换IP
导读在Linux在做高可用的时候,经常会使用到虚拟IP.在windows上一个网卡可以配置两个IP,在Linux直接使用ip命令就可以添加了. 添加 ip address add 192.168.1 ...

HTML 表格实例

HTML 表格实例的更多相关文章

随机推荐

热门专题