脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > HTML/Xhtml >

表格(TABLE)标记(TAGS)详细介绍

  发布时间：2012-12-21 11:13:58   作者：佚名   我要评论
表格(TABLE)标记(TAGS)定义及使用详解,需要了解的朋友可以参考下
表格的基本语法

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

带边框的表格： 


复制代码
代码如下:

<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C


不带边框的表格：

复制代码
代码如下:

<table>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food Drink Sweet
A B C

 跨多行、多列的表元(Table Span)

跨多列的表元 <th colspan=#>


复制代码
代码如下:

<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Morning Menu
Food Drink Sweet
A B C

跨多行的表元 <th rowspan=#>



复制代码
代码如下:

<table border>
<tr><th rowspan=3> Morning Menu</th>
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
Morning Menu Food A
Drink B
Sweet C

 表格尺寸设置

<table border=#>

边框尺寸设置： 


复制代码
代码如下:

<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table border width=# height=#>

表格尺寸设置： 


复制代码
代码如下:

<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table border cellspacing=#>

表元间隙设置： 


复制代码
代码如下:

<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

<table border cellpadding=#>

表元内部空白设置： 


复制代码
代码如下:

<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Food Drink Sweet
A B C

 表格内文字的对齐/布局

<tr align=#>

<th align=#> #=left, center, right

<td align=#>

复制代码
代码如下:

<table border width=160>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</table>

Food Drink Sweet
A B C

<tr valign=#>

<th valign=#> #=top, middle, bottom, baseline

<td valign=#>

复制代码
代码如下:

<table border height=100>
<tr>
<th>Food</th><th>Drink</th>
<th>Sweet</th><th>Other</th>
<tr>
<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
<td valign=baseline>D</td>
</table>

Food Drink Sweet Other
A B C D

 表格在页面中的对齐/布局(Floating Table)

<table align=left>


复制代码
代码如下:

<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

My favorites...<br> cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

<table align=right>

Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

<table vspace=# hspace=#> #=space value


复制代码
代码如下:

<table align="left" border vspace=20 hspace=30>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

 My favorites...<br> cookies, chocolates, and more.
Food Drink Sweet
A B C

My favorites...
cookies, chocolates, and more.

 表格的标题

<caption align=#> ... </caption> #=left, center, right

复制代码
代码如下:

<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Lunch
Food Drink Sweet
A B C

<caption valign=#> ... </caption> #=top, bottom

valign=top is default.


复制代码
代码如下:

<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

Food Drink Sweet
A B C
Lunch

相关文章

  • HTML 表格详解（简单易懂较详细）

    HTML表格用于在网页上展示数据,通过标签及其相关标签来创建,表格由行和列组成,每一行包含一个或多个单元格,单元格可以包含文本、图像、链接等元素,本文将详细介绍HTML表格
    2025-03-12

  • 禁止HTML页面滚动的操作方法

    本文介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点，感兴
    2025-02-24

  • 使用HTML和CSS实现文字镂空效果的代码示例

    在 Web 开发中，文本的视觉效果是提升用户体验的重要因素之一,通过 CSS 技巧，我们可以创造出许多独特的效果，例如文字镂空效果,本文将带你一步一步实现一个简单的文字镂空
    2024-11-17

  • Html去除a标签的默认样式的操作代码

    在Html中,a标签默认的超链接样式是蓝色字体配下划线,这可能不满足所有设计需求,如需去除这些默认样式,可以通过CSS来实现,本文给大家介绍Html去除a标签的默认样式的操作代码
    2024-09-25

  • HTML文本域如何设置为禁止用户手动拖动

    在HTML中,可以通过设置CSS的resize属性为none,来禁止用户手动拖动文本域（textarea）的大小,这种方法简单有效,适用于大多数现代浏览器,但需要在老旧浏览器中进行测试以确保
    2024-09-25

  • 如何通过HTML/CSS 实现各类进度条的功能

    本文详细介绍了如何利用HTML和CSS实现多种风格的进度条,包括基础的水平进度条、环形进度条以及球形进度条等,还探讨了如何通过动画增强视觉效果,内容涵盖了使用HTML原生标签
    2024-09-19

  • HTML中Canvas关键知识点总结

    Canvas 提供了一套强大的 2D 绘图 API，适用于各种图形绘制、图像处理和动画制作,可以帮助你创建复杂且高效的网页图形应用，这篇文章主要介绍了HTML中Canvas关键知识点总结
    2024-06-03

  • html table+css实现可编辑表格的示例代码

    本文主要介绍了html table+css实现可编辑表格的示例代码，主要使用HTML5的contenteditable属性，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习
    2024-03-06

  • HTML中使用Flex布局实现双行夹批效果

    本文主要介绍了HTML中使用Flex布局实现双行夹批效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
    2024-02-22

  • HTML+CSS实现炫酷登录切换的项目实践

    在网站开发中，登录页面是必不可少的一部分，本文就来介绍一下HTML+CSS实现登录切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需
    2024-02-02

最新评论

关注微信公众号

扫一扫