项目三任务二 制作“商品详情”页面

网上书店制作“商品详情”页面CONTENTS目录创建表格第一部分表格标记第二部分CSS控制表格的样式第三部分创建表格第一部分创建表格在网页设计中，HTML表格标记是一个强大的工具，它允许我们以结构化的方式展示和组织数据，能够清晰地呈现复杂的信息。通过适当的CSS样式和HTML属性，我们可以进一步增强表格的可读性、美观性以及可访问性。创建表格在HTML中，可以使用表格标记来创建表格。使用标记创建表格的基本语法格式如下：<table>

<caption>表格标题</caption>

<tr>

<th>表头1</th>

...

</tr><tr>

<td>数据1</td>

...

</tr>

...

</table>创建表格<table></table>：用于定义表格<caption></caption>：用于定义表格的标题或说明<tr></tr>：用于定义一行<th></th>：用于定义表头<td></td>：用于定义一个单元格缺一不可表格标记第二部分表格标记1.<table>标记<table>标记包含多个属性，通过控制这些属性可以实现控制表格的外观和行为。属性描述border控制表格边框的宽度（默认border=’0’无边框），常用属性值为pxcellpadding定义单元格内边距，即单元格内容与其边框之间的距离，常用属性值为pxcellspacing定义单元格之间的间距，常用属性值为pxwidth设置表格的宽度，常用属性值为pxheight设置表格的高度，常用属性值为pxalign控制表格在页面上的对其方式，常用属性值有left、center、rightbgcolor设置表格的背景颜色表格标记1.<table>标记——border属性border属性用于设置表格的边框样式，其属性值通常是一个表示边框宽度的数值，其单位是像素（px）。表格的边框默认是不显示的，即border=0。表格标记1.<table>标记——border属性<tableborder="10">border值增大时，表格的外边框变宽，各单元格的边框线是不发生变化。在<table>标记中的border属性控制的是表格的外边框的样式。表格标记1.<table>标记——cellpadding属性cellpadding属性用于指定表格单元格（<th>或<td>）内容与其边框之间的空间大小，即单元格内容与边框之间的距离。其属性值通常为一个数字，单位是像素（px）。表格标记1.<table>标记——cellpadding属性<tableborder="1"cellpadding="10">当cellpadding的值变大时，单元格中内容与其边框之间的距离明显增大。单元格内容与其边框之间的距离默认是2px表格标记1.<table>标记——cellspacing属性cellspacing属性用来设置表格中相邻单元格之间的距离，其属性值通常是一个数字，单位是像素（px）。表格标记1.<table>标记——cellspacing属性<tableborder="1"cellspacing="20">当cellspacing的值变大时，相邻单元格之间的距离明显增大，而且单元格与表格外边框之间的距离也会变大。表格标记1.<table>标记——cellspacing属性在CSS中，border-spacing属性用于设置相邻单元格之间的距离。表格标记1.<table>标记——width属性和height属性在表格中，width属性和height属性可以用于<table>、<th>、<td>标记，用来指定元素的宽度和高度。它们的属性值通常是一个数字，后跟单位（如像素px、百分比%或其他有效的长度单位）。

表格标记1.<table>标记——width属性和height属性

width属性应用于<table>元素时，它设置的是整个表格的宽度应用于<th>或<td>元素时，它设置的是单元格的宽度。表格标记1.<table>标记——width属性和height属性

height属性应用于<table>元素时，它设置的是整个表格的高度应用于<th>或<td>元素时，它设置的是单元格的高度表格标记1.<table>标记——width属性和height属性

<tableborder="1"width="400"height="300">表格标记1.<table>标记——align属性align属性用于控制表格的对齐方式，其常用的属性值有left、right、center。这里需要注意的是，align设置的对齐方式是针对表格在页面中的对齐方式，对于表格中内容相对于单元格的位置是不起作用的。

表格标记1.<table>标记——align属性

<tableborder="1"width="400"height="300"align="center">表格在页面中居中显示表格标记1.<table>标记——bgcolor属性bgcolor属性用于设置表格的背景颜色。其颜色值可以是颜色名称（如red）、十六进制颜色代码（如#FF0000），或者RGB颜色代码（如rgb(255,0,0)）。

表格标记1.<table>标记——bgcolor属性

<tableborder="1"width="400"height="300"align="center" bgcolor="lightblue">表格标记2.<caption>标记在HTML中，<caption>标记用于为表格定义标题。这个标题通常显示在表格的上方，并且是表格的第一个子元素。<caption>标记也可以用来为表格提供一个简短的描述，这样可以便于提高表格的可读性和可访问性，有助于提升用户对表格内容的理解。

表格标记3.<tr>标记在HTML中，<tr>标记用于定义表格中的行。通过定义<tr>标记的属性，可以控制表格中行的行为。

属性说明属性值height设置行高像素align设置一行内容的水平对齐方式left、right、centervalign设置一行内容的垂直对齐方式top、middle、bottombgcolor设置行背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)background设置行背景图像url地址表格3-2-2

<tr>标记常用的属性表格标记3.<tr>标记

表格标记4.<th>标记在HTML中，<th>标记用于定义表格的表头单元格。它通常用于表格的<thead>部分，用来表示列标题。同时，它也可以用于<tbody>或<tfoot>部分，用来显示行标题。<th>标记在语义上强调了它所包含内容的重要性，并且通常会自动地以加粗和居中的方式显示。

表格标记4.<th>标记

表格标记4.<th>标记在一个表格中，只能包含一对<thead>标记、一对<tfoot>标记，可以包含多个<tbody>标记，而且它们必须按照<thead>、<tfoot>和<tbody>的顺序使用。表格标记5.<td>标记在HTML中，<td>标记用于定义表格中的一个单元格，通常放置在<table>标记中，并且是<tr>的一个子元素。<td>中不能包含其他<td>或<th>元素，但是可以包含文本、图片、列表、段落等。

表格标记5.<td>标记

属性说明属性值height设置单元格的高度像素width设置单元格的宽度像素align设置单元格内容的水平对齐方式left、right、centervalign设置单元格内容的垂直对齐方式top、middle、bottombgcolor设置单元格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)background设置单元格的背景图像url地址rowspan设置单元格纵向跨越的行数正整数colspan设置单元格横向跨越的列数正整数表格3-2-3

<td>标记常用的属性表格标记5.<td>标记

CSS控制表格的样式第三部分CSS控制表格的样式1.CSS控制表格的边框在设置表格的边框效果时，应用<table>标记的border属性设置效果较为单调，我们可以使用CSS中的多种属性来控制其边框。CSS控制表格的样式1.CSS控制表格的边框属性说明border设置表格的边框，可以指定边框的宽度、样式和颜色border-collapse设置表格的边框是否合并为单一的边框border-spacing设置分隔单元格边框线间的距离，这个属性仅在border-collapse属性设置为separate时有效border-width设置边框的宽度border-style设置边框的样式border-color设置边框的颜色border-radius设置边框的圆角box-shadow为表格添加阴影效果表格3-2-4

CSS中常用的边框属性CSS控制表格的样式1.CSS控制表格的边框CSS控制表格的样式1.CSS控制表格的边框合并边框线后CSS控制表格的样式2.CSS控制单元格的边距在CSS中，控制表格中单元格的边距通常包括设置单元格的内边距（padding）属性，用于控制单元格与其边框之间的距离。也可以从4个方向上逐一设置内边距，分别是padding-top、padding-right、padding-bottom和padding-left。CSS控制表格的样式2.CSS控制单元格的边距设置单元格的内边距后CSS控制表格的样式3.CSS控制单元格的宽高在CSS中，我们可以通过设置width属性和