HTML教程：表格文字对齐与布局

需积分: 20 186 浏览量更新于2024-07-10 收藏 1.67MB PPT 举报

"本资源是一份关于HTML教程的学习PPT文档，主要讲解了如何在HTML中对表格内的文字进行左右和上下排列布局。" 在HTML中，表格是组织和展示数据的重要工具。对于表格内文字的对齐和布局，我们可以使用`<tr>`和`<td>`（表格行和单元格）标签的`align`和`valign`属性来进行控制。`align`属性用于左右排列，而`valign`属性用于上下排列。 **左右排列：** 左右排列是通过`align`属性来设置的，它可以接受三个值： 1. `left`：使单元格内容左对齐。 2. `center`：使单元格内容居中对齐。 3. `right`：使单元格内容右对齐。例如，以下代码展示了如何设置表格内文字的左右排列： ```html <table border=1 width="200"> <tr> <th>居左</th> <th>居中</th> <th>居右</th> </tr> <tr> <td align="left">A</td> <td align="center">B</td> <td align="right">C</td> </tr> </table> ``` **上下排列：** 上下排列是通过`valign`属性来设定的，它有四个主要的值： 1. `top`：使单元格内容上齐。 2. `middle`：使单元格内容垂直居中。 3. `bottom`：使单元格内容下齐。 4. `baseline`：使单元格内容基于基线对齐。例如，以下代码展示了如何设置表格内文字的上下排列： ```html <table border=1 width="250" height="100"> <tr> <th>上齐</th> <th>居中</th> <th>下齐</th> <th>基线</th> </tr> <tr> <td valign="top">A</td> <td valign="middle">B</td> <td valign="bottom">C</td> <td valign="baseline">D</td> </tr> </table> ``` HTML的基础结构通常包括`<html>`、`<head>`和`<body>`标签。`<html>`是整个文档的根元素，`<head>`包含文档的元信息，如标题、字符集设置等，而`<body>`则包含用户可见的内容。在HTML中，我们使用一系列的标签来定义不同的元素和样式，如标题`<h1>`至`<h6>`，段落`<p>`，列表`<ul>`、`<ol>`和`<dl>`，以及图像`<img>`等。此外，HTML还支持与其他文件的链接、图像的插入、音频和视频的播放。例如，插入图像的标签是`<img src="图像文件名">`，页面间的链接可以通过`<a href="文件路径/文件名">`实现，而音频和视频的播放则分别通过`<embed>`标签，添加`src`属性指向媒体文件，并通过`autostart`属性控制是否自动播放。了解并熟练掌握HTML的基础语法和元素，是创建网页和进行网页设计的必备技能。通过不断实践和学习，可以创建出功能丰富、设计精美的网页。

ServeRobotics

粉丝: 36
资源: 2万+

HTML教程：表格文字对齐与布局

网页制作：项目06使用表格布局门户网站首页--.ppt

04-HTML表格.ppt

[精选]HTML表格、框架-使用大全.ppt

HTML基础语言教程-PPT课件.ppt

HTML表格、框架-使用大全.ppt

高效灵活的网页布局--框架的应用.ppt

推选文档HTML语法与元素-土法制作法PPT.ppt

PPT高级技能培训-文档资料.ppt

HTML制作表格(ppt文档).ppt

Excel培训资料-文档资料.ppt

最新资源