程序博客网 > it书籍

HTML表格

来源：互联网 发布：it书籍 编辑：程序博客网 时间：2024/06/05 02:55

1、表格

<table>定义表格

<tr>table row定义表格行

<td>table data 定义表格内容

例子：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="form/html; charset=utf-8" />
<style type="text/css">
p {color:red}
h1 {color:blue}
</style>
</head>
<body>
<h1>创建一个两行三列的表格</h1>
<table border="15">
<tr>
<td>34</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>340</td>
<td>74</td>
<td>03</td>
</tr>
</table>
</body>
</html>

结果：


2、表格的边框

如果不定义边框则表格没有边框，用border定义边框, 如上面例子所示

3、表格表头用<th>标签表示

大多数浏览器会把表头显示为粗体居中的文本

<body>
<h1>创建一个两行三列的表格</h1>
<table border="15">
<tr>
<th>heading</th>
<th>another heading</th>
<th>other heading</th>
</tr>
<tr>
<td>34</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>340</td>
<td>74</td>
<td>03</td>
</tr>
</table>
</body>

结果


4、表格空单元

<body>
<h1>创建一个两行三列的表格</h1>
<table border="15">
<tr>
<th>heading</th>
<th>another heading</th>
<th>other heading</th>
</tr>
<tr>
<td>34</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>74</td>
<td>03</td>
</tr>
</table>
</body>

结果：


5、用<caption>标签表示标题

<body>
<h1>创建一个两行三列的表格</h1>
<table border="15">
<caption>我是表格</caption>
<tr>
<th>heading</th>
<th>another heading</th>
<th>other heading</th>
</tr>
<tr>
<td>34</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>74</td>
<td>03</td>
</tr>
</table>
</body>


6、跨两行或跨两列

<body>
<h1>创建一个两行三列的表格</h1>
<table border="15">
<caption>我是表格</caption>
<tr>
<th>heading</th>
<th colspan="2">another heading</th>    #跨两列
</tr>
<tr>
<th rowspan="2">数字</th>     #跨两行
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>74</td>
<td>03</td>
</tr>
</table>
</body>


7、表格内的标签：列表用<ul>  列出的内容用：<li>

<body>
<h1>创建一个三行三列的表格</h1>
<table border="5">
<caption>我是表格</caption>
<tr>
<th>another heading</th>
<th colspan="2">数字</th>
</tr>
<tr>
<td>
你是？<br/>
程序猿？
</td>
<td>喜欢吃：
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
</ul>
</td>
</tr>
<tr>
<td>统计水果的量表：
<table border="1">
<tr>
<th>水果名称</th>
<td colspan="2">数量</td>
</tr>
<tr>
<td>香蕉</td>
<td>2</td>
<th rowspan="3">都好吃</th>
</tr>
<tr>
<td>苹果</td>
<td>22</td>
</tr>
<tr>
<td>香蕉</td>
<td>233</td>
</tr>
</table>
</td>
<td>
好！
</td>
</tr>
</table>
</body>

结果：


8、单元格边距和间距

边距 cell  padding

间距 cell sapcing

<body>
<table border="5">
<caption>没有间距 边距</caption>
<tr>
<td>29</td>
<td>2</td>
</tr>
<tr>
<td>26</td>
<td>29</td>
</tr>
</table>
<table border="5" cellpadding="10">
<caption>边距 cellpadding</caption>
<tr>
<td>29</td>
<td>2</td>
</tr>
<tr>
<td>26</td>
<td>29</td>
</tr>
</table>
<table border="5" cellspacing="10">
<caption>间距 cellspacing</caption>
<tr>
<td>29</td>
<td>2</td>
</tr>
<tr>
<td>26</td>
<td>29</td>
</tr>
</table>
</body>

结果：


9、表格添加背景颜色和图像

背景颜色： bgcolor

背景图片： background

<body>
<table border="5" cellpadding="10" bgcolor="red">
<caption>边距 cellpadding</caption>
<tr>
<td>29</td>
<td>2</td>
</tr>
<tr>
<td>26</td>
<td>29</td>
</tr>
</table>
<table border="5" cellpadding="10" background="taylor.jpg">
<caption>边距 cellpadding</caption>
<tr>
<td>29</td>
<td>2</td>
</tr>
<tr>
<td>26</td>
<td>29</td>
</tr>
</table>
</body>

结果：


10、单元格背景颜色和图片

背景颜色： bgcolor

背景图片： background

<body>
<table border="5" cellpadding="10">
<caption>哈哈</caption>
<tr>
<td bgcolor="red">29</td>
<td background="taylor.jpg">2</td>
</tr>
<tr>
<td>26</td>
<td>29</td>
</tr>
</table>
</body>

结果


11、单元格居中 左对齐 右对齐

<body>
<table width="400" border="5" cellpadding="10">
<caption>哈哈</caption>
<tr>
<td align="right">29</td>
<td align="right">2</td>
</tr>
<tr>
<td align="left">26</td>
<td align="left">29</td>
</tr>
</table>
</body>


12、单元格框架（frame）属性

box 仅保留外框  above 仅保留上边框 below  仅保留下边看  hsides  保留上下边框 vsides 保留左右边框

以box为例

<body>
<table frame="box">
<caption>哈哈</caption>
<tr>
<td>29</td>
<td>2</td>
</tr>
<tr>
<td>26</td>
<td>29</td>
</tr>
</table>
</body>

结果

表格描述<table>定义表格<caption>定义表格标题。<th>定义表格的表头。<tr>定义表格的行。<td>定义表格单元。<thead>定义表格的页眉。<tbody>定义表格的主体。<tfoot>定义表格的页脚。<col>定义用于表格列的属性。<colgroup>定义表格列的组。



阅读全文
0 0
it书籍 it书籍
原创粉丝点击
热门IT博客
网站后台系统源码java网站后台系统源码java
软件测试团队管理软件测试团队管理
91手机助手 mac
手机淘宝怎么改评论
咫尺网络下载
twfun.info 新域名
中华卫视网络电视台
水谷雅子保养方法 知乎
淘宝无线端首页尺寸
windows网络编程第三版
查看ip端口是否打开
考试失败 知乎
mac怎么换用户头像
政府单位网络监控
js地球仪特效
淘宝客建立推广网站
ubuntu解压缩命令 .gz
java全角数字转半角
中式台球杨帆 知乎
宛然如生,不亦善乎翻译
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 超重和失重 超重失重 失重歌曲 失重餐厅 失重mp3 失重睡眠曲 失重感 完全失重 催眠曲失重 失重秤 失重英文 失重 催眠曲 热失重 过山车失重很难受能死人吗 失重感太强会不会猝死 失重催眠曲mp3 过山车失重感会致死吗 失重在线试听 失重mp3八分钟 干燥失重计算公式 脑袋突然晕一下像失重 坐过山车怎么克服失重 迪士尼飞越地平线有失重感吗 加速度向上是超重还是失重 夲 观看一夲道观看免费 一夲道久在道在线文字 一夲道专区 大香焦一夲道久久草 一夲道久在道在线网站 一夲道久道在线网站 一夲道免费观 一夲道大香木蕉 一夲道免费观看 夲怎么读 一夲道高清专区 一夲道久在道中文字 一夲道久一区二区 一夲道dvd久在道在线播放 一夲道久在道在线播放11k 一夲道dvd不卡手机在线播放

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里