HTML教程：单元格<td>与<th>属性解析

需积分: 3 73 浏览量更新于2024-08-17 收藏 792KB PPT 举报

"这篇教程详细介绍了HTML网页设计中单元格标签`<td>`和`<th>`的属性，以及HTML的基础知识。HTML全称为超文本标记语言，是一种用于创建超文本文档的语言，允许集成多媒体内容如图片、声音等。HTML文档本身是静态的，由各种标记指令构成，用于定义页面的布局和结构。创建HTML文档可以使用简单的文本编辑器，如记事本，编辑完成后使用浏览器进行预览。 HTML文档的基本结构包括`<HTML>`、`<HEAD>`和`<BODY>`标签。`<HEAD>`部分通常包含文档的元信息，如`<TITLE>`标签定义的页面标题，而`<BODY>`部分则包含实际的网页内容。`<META>`标签用于设置文档的元数据，例如编码、作者信息等。在单元格标签`<td>`和`<th>`（表头单元格）中，有多个属性可以控制其显示效果： 1. `Width`: 定义单元格的宽度，可以是像素值或百分比。 2. `Height`: 设置单元格的高度，同样支持像素值或百分比。 3. `Align`: 控制单元格内容的水平对齐方式，可选值为`left`、`center`、`right`。 4. `Valign`: 决定单元格内容的垂直对齐，可选值有`top`、`middle`、`bottom`。 5. `Background`: 用于设定单元格的背景图像。 6. `Bgcolor`: 设置单元格的背景颜色。 7. `Bordercolor`: 定义单元格边框的颜色。 8. `Rowspan`: 表示单元格跨行的数量。 9. `Colspan`: 表示单元格跨列的数量。在编辑HTML文件时，可以使用专门的HTML编辑器如Dreamweaver，也可以用记事本等简单文本编辑器，然后用浏览器预览效果。保存HTML文件时，需要使用`.html`或`.htm`作为文件扩展名。如果需要修改，可以直接在编辑器中编辑源代码，保存后刷新浏览器查看更新。通过理解这些基本概念和标签属性，初学者可以开始创建和设计自己的HTML网页。"

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>酒店管理系统</title> <link rel="stylesheet" href="style.css"> </head> <body>

酒店管理系统

<main>

酒店客房管理

ID	类型	价格	编辑
1	单人房	¥200	<button class="edit-btn">编辑</button>
2	双人房	¥300	<button class="edit-btn">编辑</button>
3	豪华房	¥500	<button class="edit-btn">编辑</button>

添加客房

<form>

</main> <script src="script.js"></script> </body> </html>给代码逐行加上注释

137 浏览量

<td><button class="edit-btn">编辑</button></td>  </tr> <tr> <td>2</td> <td>双人房</td> <td>¥300</td> <td><button class="edit-btn">编辑</button></td> </tr>...

楼层号

房间号

楼层

可住人数

已住人数

将表格放置在一个box中并利用css设置合适的长宽要求左右两列的长度一致

楼层号
房间号
楼层
可住人数
已住人数

208 浏览量

<th class="left-column">楼层号</th> <td></td> </tr> <tr> <th class="left-column">房间号</th> <td></td> </tr> <tr> <th class="left-column">楼层</th> <td></td> </tr> <tr> <th class="left-...

<!doctype html> <html> <head> <meta charset="UTF-8"> <style> #bills{ width: 400px; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { 空缺处 }); </script> </head> <body> </tr

编号分类名称价格(元)

01 食品农夫山泉矿泉水 2.00
02 日用品洗发水 25.00

03 娱乐休闲暑假旅游 5000.00

</body>将食品替换成图片显示

编号	分类	名称	价格(元)
01	食品	农夫山泉矿泉水	2.00
02	日用品	洗发水	25.00
03	娱乐休闲	暑假旅游	5000.00

153 浏览量

<td>农夫山泉矿泉水</td> <td>2.00</td> </tr> <tr> <td>02</td> <td>日用品</td> <td>洗发水</td> <td>25.00</td> </tr> <tr> <td>03</td> <td>娱乐休闲</td> <td>暑假旅游</td> <td>5000.00</td> ...

我创建了一个表格，如何增加第一列且为单选框：

策略类型策略构成:期权策略构成:ETF 最大利润最大亏损交易量

2023-05-25 上传

<td th:text="${portfolio.openingPrice}"></td> <td th:text="${portfolio.maxProfit}"></td> <td th:text="${portfolio.maxLoss}"></td> <td th:text="${portfolio.tradingVolume}"></td> </tr> </tbody> </...

Header 1 Header 2 Header 3
Fixed Data 1 Data 2
Fixed Data 3 Data 4
Header 1
Fixed
Fixed
实现拖动父级滚动条超出100像素固定表格下所有的第一列td 实例

Header 1	Header 2	Header 3
Fixed	Data 1	Data 2
Fixed	Data 3	Data 4

Header 1
Fixed
Fixed

132 浏览量

<th class="fixed-column">Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td class="fixed-column">Fixed</td> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td ...

完善

商品名称单价数量总价操作

健身水杯 100 <input type="number" value="1" min="1"> 100 <button class="btn btn-danger">删除</button>

商品2 200 <input type="number" value="1" min="1"> 200 <button class="btn btn-danger">删除</button>

商品3 300 <input type="number" value="1" min="1"> 300 <button class="btn btn-danger">删除</button>

总价： 600

这个代码让他美观

商品名称	单价	数量	总价	操作
健身水杯	100	<input type="number" value="1" min="1">	100	<button class="btn btn-danger">删除</button>
商品2	200	<input type="number" value="1" min="1">	200	<button class="btn btn-danger">删除</button>
商品3	300	<input type="number" value="1" min="1">	300	<button class="btn btn-danger">删除</button>
总价：	600