2.3 HTML表格标记 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

网页设计与制作 第02章_HTML 本章内容 HTML基础知识 HTML的一些基本标记 HTML表格标记 HTML框架标记 HTML滚动字幕和多媒体标记 2 网页设计与制作 2.3 HTML表格标记 表格标记在网页制作中的作用非常重要，它不仅仅是一种数据表现工具（比如学生成绩表格），更重要的是用于网页的布局和排版。很多网页中都使用了多重嵌套表格，主要是因为通过表格可以方便有效地固定文本、图像等网页元素的输出位置，还可以进行多样化的格式设置。 熟练掌握了表格的运用技术，在控制网页整体布局和网页元素定位等方面就会更加得心应手。 3 网页设计与制作 2.3 HTML表格标记 属性 描述 示例 align 设置表格在网页中的对齐方式 <table align="center"> bgcolor 设置表格的背景色 <table bgcolor="gray"> background 设置表格的背景图片 <table background="Logo.jpg"> border 设置表格的边框粗细，默认为0 <table border="1"> bordercolor 设置表格的边框颜色 <table bordercolor="blue"> cellspacing 设置表格中相邻两个单元格之间的间距 <table cellspacing="5"> cellpadding 设置表格单元格内容与单元格边框的间距 <table cellpadding="2"> width 设置表格的宽度，可用绝对像素值或窗口宽度的百分比值 <table width="600"> <table width="50%"> height 设置表格的高度，使用绝对像素值 <table height="300"> 4 网页设计与制作 表2.3 <table>标记的部分常见属性 2.3 HTML表格标记 属性 描述 示例 rules 表格分隔线的显示状态，取值如下： all（显示所有分隔线），groups（只显示组与组的分隔线），rows（只显示行与行的分隔线），cols（只显示列与列的分隔线），none（所有分隔线都不显示） <table rules="rows"> frame 表格边框的显示状态，取值如下： box（显示所有表格边框），void（不显示表格边框），hsides（只显示表格的上下边框），vsides（只显示表格的左右边框），above（只显示表格的上边框），below（只显示表格的下边框），lhs（只显示表格的左边框），rhs（只显示表格的右边框） <table frame="hsides"> 5 网页设计与制作 表2.3 <table>标记的部分常见属性（续） 2.3 HTML表格标记 2.3.2 表格行标记<tr></tr>和表格单元格标记<td></td> 如上所述，表格是用<table></table>来定义的，而一个表格可以分成很多行（row），用<tr></tr>定义（意为table row），每行又可以分成很多单元格，用<td></td>定义（意为table data）。它们是创建表格最基本的三个标记对。 请阅读例2.11代码。 6 网页设计与制作 2.3 HTML表格标记 有些表格需要有标题行，这时可用<th></th>替代<td></td>，在<th></th>之间的单元格文字会自动加粗并居中显示。 注意：无论表格中要呈现的内容是文本、图像、超级链接、嵌套表格、表单或其他任何元素，都只能放入<td></td>标记对或<th></th>标记对之间。将内容直接放在<table></table>之间或放在<tr></tr>之间都是无意义的。 7 网页设计与制作 2.3 HTML表格标记 属性 描述 示例 align 设置表格当前行的内容的水平对齐方式，取值为left（水平居左对齐）、center（水平居中对齐）、right（水平居右对齐） <tr align="center"> bgcolor 设置表格当前行的背景色 <tr bgcolor="blue"> background 设置表格当前行的背景图片 <tr background="logo.jpg"> bordercolor 设置表格当前行的边框颜色 <tr bordercolor="red"> height 设置表格当前行的行高 <tr height="120"> valign 设置表格当前行的内容的垂直对齐方式，取值为top（垂直靠顶端对齐）、middle（垂直居中对齐）或bottom（垂直靠底部对齐） <tr align="top"> 8 网页设计与制作 表2.4 <tr>标记的部分常见属性 2.3 HTML表格标记 属