超文本标记语言（html）之表格的使用

最新推荐文章于 2023-07-13 20:31:01 发布
最新推荐文章于 2023-07-13 20:31:01 发布
阅读量240 收藏 2
点赞数 1
文章标签： html 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yysyyssmdsmd/article/details/129653146
版权

一、插入表格并定义表格结构<table>、<tr>、<td>

基本语法：

<table>
<tr>
<td></td>
</tr>
</table>

语法说明：

<table>:定义表结构

<tr>:定义行结构

<td>:定义列结构

实例代码：

<html>
<head>
<title>设置基本表格结构</title>
</head>
<body>
     <!-- table 默认不显示边框 border="1"显示 -->
<table width="470" border="1" align="center">
    <!--tr 行-->
    <tr>
      <!-- td 单元格 其中必须写内容 这样单元格才能显示 -->
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

二、设置表格标题<caption>

基本语法：

<table>
<caption align="" valign="">插入表格标题</caption>
<tr>
<td></td>
</tr>

实例代码：

<html>
<head>
<title>插入表格标题</title>
</head>
<body>
<table width="470" border="1" align="center">
 <caption align="center">计算机语言</caption>
    <tr>
     <td>Dreamweaver</td>
     <td>Access</td>
     <td>C++</td>
   </tr>
<tr>
     <td>FrontPage</td>
     <td>SQL SERVER 2000</td>
     <td>C#</td>
   </tr>
</table>
</body>
</html>

三、设置表格表头<th>

基本语法：

<table>
<tr>
<th>….</th>
<td></td>
</tr>

实例代码：

<html>
<head>
<title>设置表格表头</title>
</head>
<body>
<table width="470" border="1" align="center">
    <tr>
      <!-- th  表头 居中且加粗 -->
      <th>网页设计</th>
      <th>数据库开发</th>
      <th>程序设计</th>
   </tr>
<tr>
     <td>Dreamweaver</td>
     <td>Access</td>
     <td>C++</td>
   </tr>
<tr>
     <td>FrontPage</td>
     <td>SQL SERVER</td>
     <td>C#</td>
   </tr>
</table>
</body>
</html>

四、设置表格的宽度和高度

基本语法：

<table width="" height="">
<tr>
<td></td>
</tr>
</table>

实例代码：

<html>
<head>
   <title>设置表格的宽度和高度</title>
</head>
<body>
  <table width="470" height="40" border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
  </table>
<table width="200" height="80" border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   </table>
</body>
</html>

五、设置表格的边框属性

基本语法：

<table border="" bordercolor="" >
<tr>
<td></td>
</tr>
</table>
Border:边框粗细
Bordercolor:边框颜色

实例代码：

<html>
<head>
<title>设置表格的边框属性</title>
</head>
<body>
<table width="470" border="1"  bordercolor="#0000FF">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

六、设置单元格边距与间距

基本语法：

1.间距：<table cellspacing=数值>

2.边距：<table cellpadding=数值>

实例代码：

<html>
<head>
<title>设置单元格间距</title>
</head>
<body>
<table width="380" border="1" cellspacing="0">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </table>
<table width="380" border="1" cellspacing="5">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 </table>
</body>
</html>

七、设置表格背景

基本语法：

<table bgcolor="" background="" align="">
<tr>
<td></td>
</tr>
</table>

实例代码：

<html>
<head>
<title>设置表格的背景</title>
</head>
<body>
<table width="470" border="1" bgcolor="red" align="center">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>

</body>
</html>

八、设置跨行跨列

代码说明：

<td colspan=数值>
<th colspan=数值>
<td rowspan=数值>
<th rowspan=数值>
Colspan：跨列
Rowspan：跨行

实例代码：

<html>
<head>
<title>设置跨行</title>
</head>
<body>
<table width="380" border="1">
   <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>  
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
</table>

</body>
</html>

<html>
<head>
<title>设置跨列</title>
</head>
<body>
<table width="380" border="1">
   <tr>
    <td colspan="2">&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
<tr>
    <td>&nbsp;</td>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

喝可乐的monkey
关注
HTML:超文本标记语言 表格
shi15062772894的博客
12-06 227
表格标签 1：表格的基本语法 <table> <tr> <td>单元格内的文字</td> ... ... </tr> ... </table> （1）<table></table>用于定义表格的标签 （2）<tr></tr>标签用于定义表格中的行，必须镶嵌在<table></table>标签中。...
在html中实现word中打批注的功能
biraotian的博客
08-15 2420
随着企业数字化的发展，各行各业都需要不断积攒行业数据，数据的来源有很多，但是一般这些数据都需要通过人机耦合的方式进行数据准确性的确认。为了实现模型跑出来的结果可以准确的显示在页面中，正确的结果又可以反哺给模型，所以在前端做了很多尝试。我们实现的有3种:1是把内容转成图片，利用ocr识别，前端svg绘制坐标。2通过把图片/文本加上编号，缺陷是结构要足够简单，复杂排版不满足。3是把文档解析成html，对html进行打标签。这里只讲第三种，也的最近刚写的demo，有兴趣的可以拷贝到自己的项目中试试运行环境： no
html语言表格标记,关于html语言的表格(TABLE)标记(TAGS)
weixin_39650784的博客
05-30 115
表格标记表格的基本语法... - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据)带边框的表格：FoodDrinkSweetABCFoodDrinkSweetABC不带边框的表格：FoodDrinkSweetABCFoodDrinkSweetABC跨多行、多列的表元(Table Span)跨多列的表元 Morning MenuFood Drink SweetAB...
HTML——表格标签
wshwsh_的博客
07-13 1196
表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。
html 表格单元格的宽度和高度如何设置
热门推荐
xiaoweids的博客
05-18 1万+
先看td的width吧，某一个td的width是和所处的一列每个td的width都相关的，取其中最大的width作为这一列中每个td的width，这点是让我们最混淆的地方，一定要从全局把握某个td的width，不能从这一个的width设置就断言它的宽度就是多少，这样是不准确的。还有一点要注意，就是td的height和tr的height之间的关系。当有的tr设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满足设置了具体值的tr，之后再全部给没有设置具体值的tr。
HTML的超文本标记语言
m0_70990872的博客
07-20 703
HTML的超文本标记语言
HTML(超文本标记语言)
pingLS1016的博客
06-07 2821
HTML（超文本标记语言）是专门给文本添加语义的，而不是修改文本形式，这些用于描述其他文本语义的文本，我们称之为标签，这些标签在浏览器中不会被显示，所以被称为超文本标记语言。
HTML 超文本标记语言
m0_66451927的博客
01-25 2309
说明：因为HTML现在常用HTML5，下文部分地方直接用HTML5代替HTML。 一、超文本标记语言 1、是什么？ 2、为什么？ 3、怎么用？ 1、是什么？ （1）什么是超文本：超文本就是用超链接的方法，将各种不同空间的文字信息组合在一起的网状文本。而超文本标记语言HTML是超文本最常用的格式。 （2）什么是超链接：超链接是网页的一部分，通过超链接将不同网页链接在一起构成网站，链接对象可以是文本或者图片，当我们对链接对象进行点击或其他触动操作时，浏览器会根据链接目标的类型来运行或打开链接目
html（超文本标记语言）题库_答案
07-01
### HTML（超文本标记语言）题库知识点解析 #### 1. Marquee 标签的用法 **题目描述**： HTML代码段中使用了`<marquee>`标签来实现文字滚动的效果。具体代码如下： ```html ...
HTML，全称HyperText Markup Language，即超文本标记语言
最新发布
05-12
HTML，全称HyperText Markup Language，即超文本标记语言，不是一种编程语言，而是一种描述性的标记语言。12 HTML包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
默认情况下，表格的宽度和高度根据内容自动调整，我们也可以手动设置表格的宽度和高度。 基本语法 语法解释 通过WIDTH属性定义表格的宽度，HEIGHT属性定义表格的高度，单位是像素或百分比。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格宽度。 文件范例：10-3.htm 设定表格的宽度和高度。01 <!– —————————— –>02 <!– 文件范例：10-3.htm –>03 <!– 文件说明：设定表格的宽度和高度 –>04 <!–
html中表格修改标题间距,css表格间距怎么调？
weixin_39874350的博客
06-07 1089
css表格间距怎么调？在CSS中可以通过相关属性对表格进行控制。1. 居中对齐对表格设置width，然后设置margin: 0 auto;(相关课程推荐：css视频教程)2. 单元格间距对表格设置border-collapse为separate，并设置border-spcing(相当于cellspacing)3. 单元格边距对td、th设置paddingtable {width: 400px;ma...
<td></td>之间的 
XIAO1hao11111的博客
06-27 253
今天开发中遇到了一个很丢脸的事：我把下图中别人写的&nbsp;给去掉了，我觉得这个很多余，结果被在大神们痛斥了一顿。因为去掉这个&nbsp;会导致td之间没有数据时td的边框不显示的问题，所以几下这个惨痛的教训，以自警。 注意：在<td></td>之间没有任何内容是，在一些低版本IE中td的边框就不会显示出来了。 转载于:htt...
HTML标记语言——表格的基本结构
weixin_33881140的博客
11-07 654
表格的基本结构1 <table>标记1.1 基本格式 <table 属性1="属性值1" 属性2="属性值2"......>表格内容</table>1.2 table标记的属性1.2.1 width属性 表示表格的宽度，它的值可以是像素（px）也可以是父级元素的百分百（%）1.2.2 height属性 ...
html设置表格高的属性,html – 设置表格单元格内容的最大高度
weixin_29783347的博客
06-04 832
我有一个表，应该总是占据屏幕的高度的一定百分比。大多数行都是固定的高度，但我有一行应该伸展来填充可用空间。如果该行中的单元格的内容溢出所需的高度，我会喜欢内容使用overflow：hidden来剪辑。不幸的是，表和行不遵守max-height属性。 (这是在W3C规范)。当单元格中有太多文本时，表格变得更高，而不是坚持指定的百分比。我可以得到表单元格的行为，如果我为它指定一个固定的高度(以像素为单...
＜td＞＜/td＞填入多少个数字追加多少行
狼魂之力
09-17 514
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/jsp/common.jsp" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="&l
  用法
年年のBlog
12-25 4655
&nbsp是空格 举例table：     这种可以用     这种不显示空格
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喝可乐的monkey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值