《HTML 表格》

最新推荐文章于 2024-09-20 21:04:52 发布
最新推荐文章于 2024-09-20 21:04:52 发布
阅读量221 收藏 3
点赞数
分类专栏： # 【 HTML 】

HTML 表格

HTML 表格实例:

First NameLast NamePoints
JillSmith50
EveJackson94
JohnDoe80
AdamJohnson67
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

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

<h4>一列:</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<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>

</body>
</html>

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格实例

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下：:

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

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

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下：

没有边框的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<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>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

表格中的表头

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

带有标题的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

跨行或跨列的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>单元格跨两格:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

表格内的标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<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>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

单元格边距

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<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="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

单元格间距

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

漂亮的表格

https://www.runoob.com/html/html-tables.html

HTML 表格标签

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

笔记

一、

如上图的表格：tr 是行数，td 是单元格数，th 是标题性质的 td

确定 tr 和 td（th 同 td）的方法:

1、从上到下，最细分到几行便是几个 tr

2、如上是三种基本单元格形式。A 是基本单元格，其余的变种都是基本单元格合并而成。B 是合并上下单元格组合而成，

C 是合并左右单元格。合并后的 B 种单元格算到第二行第一个单元格中，C 种单元格算到第四行第一个单元格中（按上表

从上到下从左到右算），所以第一行 6 个 td，第二行 6 个 td，第三行 5 个 td，第四行 1 个，第五行 6 个 td，第六行 5 个 td。

合并后用 colspan 和 rowspan 来标示 B 和 C 变种单元格是横向还是纵向吃了几个单元格(算他自己）

3、第四种变种单元格是又横向又纵向合并，这个时候同时标示 rowspan 和 colspan（空格隔开）

合并后的单元格归属原则都是左上原则，即下归上，右归左，越往左上角越优先

二、

HTML中的table可以大致分为三个部分：

  •  thead ---------表格的页眉
  •  tbody ---------表格的主体
  •  tfoot ---------定义表格的页脚

thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。

<tr> </tr> 这个标签就是放在三间房子里面的东西，每一个 <tr> </tr> 就是表格一行。

表格的每一行被分为一个个单元格。

每一个单元格就是用来存放数据的，这个数据分为两种：一，数据的名称；二，数据本身。

用 <th></th> 表示数据的名称(标题) ,

<td></td>

表示真正的数据内容。

 

一个简单实例：

三、课程表实例

<h4 style="text-align:center">课程表</h4>
<table border="1" cellpadding="10" width="100%">
    <tr>
	    <th colspan="2">时间\日期</th>
	    <th>一</th>
	    <th>二</th>
	    <th>三</th>
	    <th>四</th>
	    <th>五</th>
    </tr>

    <tr>
	    <th rowspan="2">上午</th>
	    <th>9:30-10:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>10:25-11:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
    <th colspan="7"></th>
    </tr>

    <tr>
	    <th rowspan="2">下午</th>
	    <th>14:30-15:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>15:25-16:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>
 </table>

 

四、work表实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
  <h1 style="text-align:center;">My working time</h1>
  <table border="2">
    <caption><b>Working Day</b></caption>
  <tr>
    <th rowspan="2">Am</th>
    <td>9:30</td>
    <td>11:30</td>
    <td>-----</td>
    <td>-----</td>
    <td>-----</td>
    <td>-----</td>
  </tr>
  <tr>
    <td>Working</td>
    <td>Go off work</td>
    <td>Empty</td>
    <td>Empty</td>
    <td>Empty</td>
    <td>Empty</td>
   </tr>
   <tr>
     <th colspan="7" style="text-align:center;">
       Rest
     </th>
   </tr>
   <tr>
     <th rowspan="2">Pm</th>
     <td>1:00</td>
     <td>6:00</td>
     <td>-----</td>
     <td>-----</td>
     <td>-----</td>
     <td>-----</td>
   </tr>
   <tr>
     <td>Working</td>
     <td>Go off work</td>
     <td>Empty</td>
     <td>Empty</td>
     <td>Empty</td>
     <td>Empty</td>
   </tr> 
  </table>
</body>
</html>

HarkerYX
关注
专栏目录
HTML 表格
12-13
HTML 表格 HTML 表格实例: First Name Last Name Points Jill Smith 50 Eve Jackson 94 John Doe 80 Adam Johnson 67 在线实例 这个例子演示如何在 HTML 文档中创建表格。 （可以在本页底端找到更多实例。） HTML 表格 表格由 标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例 实例
HTML表格
03-04
HTML表格 学习目标 识别基本HTML表格元素 创建HTML表格 介绍 在HTML中，我们可以使用无序列表和有序列表来创建相关内容的列表，它们将按照我们放置它们的顺序逐行显示。不过，作为Web开发人员，有时，我们需要显示更...
前端学习Day4 HTML 表格（定义➕举例）
最新发布
As977_的博客
09-20 1184
HTML中表格是由行和列组成的结构化数据集（表格数据），它让你快速简单地查找某个表示不同类型数据之间的某种关系的值。
html-表格
2301_78251908的博客
03-20 1513
一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性。border="1",用来设置表格的边框，没有这个属性，边框不显示。一个完整的表格包含三个部分：表格标题，表格表头，表格主体。thead：定义表格的头部，内部嵌套tr>th。tbody：定义表格的主体,内部嵌套td>td。td：table dock：定义表格的单元格。table：表格，作用是定义一个表格的结构。tr： table rows：定义表格的行。th可以设置表头，可以使用tr>th设置。关系：table > tr >td。
html 表格比较宽溢出的解决方法
09-28
在网页设计中，HTML表格是用于展示数据的常用元素，其结构清晰、易于理解。但是，如果表格宽度设置不当，可能会导致在页面上显示不正常，即溢出到其他容器元素或者超出了预定的布局区域。针对这种情况，我们可以采用...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
首先，我们要了解默认情况下，HTML表格会根据其内容自适应地调整宽度和高度。然而，为了更好地控制表格的布局和视觉效果，我们可以使用`WIDTH`和`HEIGHT`属性来手动设定表格尺寸。这两个属性允许你为表格指定一个...
table_go:简单、灵活、快速的 html 表格生成器
06-08
简单、灵活、快速的 html 表格生成器 安装 将此行添加到应用程序的 Gemfile 中： gem 'table_go' 然后执行： $ bundle 或者自己安装： $ gem install table_go 用法 HAML 中的示例（或更多此处： : ） = ...
表格生成器 Html表格生成器 v1.0
11-10
《Html表格生成器 v1.0：打造个性化数据展示的新利器》 在信息化时代，数据的展示和交流已经成为日常工作中不可或缺的一部分。而HTML表格作为网页中最常见、最实用的数据展示工具，其灵活性和广泛性不言而喻。然而...
html 表格
旺旺的博客
06-21 862
1.标签&lt;table&gt; &lt;/table&gt;表格&lt;tr&gt; &lt;tr/&gt;行&lt;td&gt;&lt;td /&gt;列&lt;th&gt;&lt;td/&gt;表头2.样式border添加表框。可以给表格添加边框也可以给单元格添加边框。border-spacing 单元格间距border-collapse:collapse ; 将单元格边框
html表格
05-27
HTML表格是一种用于展示数据的标准化格式，可以使用HTML的<table>、<tr>、<td>等标签来创建表格。 以下是一个简单的HTML表格示例： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table> ``` 在上面的示例中，<table>标签定义了一个表格，<tr>标签定义了表格中的行，<td>标签定义了行中的单元格，<th>标签定义了表头单元格。通过使用这些标签，可以创建出一个包含多行和多列的表格。 HTML表格还支持合并单元格、添加边框、设置单元格宽度等操作，可以根据需要进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值