03 在 HTML 中使用交互元素

索迪教育IT教育成就人生Web编程基础第三章在html中使用交互元素回顾了解文字布局相关标签的运用了解列表相关标签的运用了解图片标签的运用了解超链接标签的运用HTML表格掌握HTML表格的基本结构掌握HTML表格跨行跨列操作掌握表格相关属性的运用HTML表格表格是HTML高级组成部分，它标示数据之间的关系，使对比分析更容易理解。表格由特定数目的行和列组成。表格行表格列表格基本结构表格在一定程度上控制文本和图像在网页中的位置，而不是完全由浏览器对此进行控制Table标签用于在html中创建表格，表格被分成若干行，每行又分成若干个单元格，表格以table开始，以/table结束表格基本结构示例tableborder=“1”trtdrow1,cell1/tdtdrow1,cell2/tdtdrow1,cell3/td/trtrtdrow1,cell1/tdtdrow1,cell2/tdtdrow1,cell3/td/tr/table表格第一行表格第二行表格标题caption/caption标题的起止标志tableborder=“1”caption员工信息/captiontrtd姓名/tdtd联系电话/tdtd电子邮箱/td/trtrtdtom/tdtd12345678/[e-mail]/td/tr/table表格列标题信息th/th起止标志tableborder=“1”caption员工信息/captiontrth姓名/thth联系电话/thth电子邮箱/th/trtrtdtom/tdtd12345678/[e-mail]/td/tr/tableHTML的表格属性表格，行，单元格都有WidthHeight属性Width用于设置宽度，属性值用数字或百分比表示Height用于设置高度，属性值用数字或百分比表示例如：tableborde=“1”width=“25％”height=“25％”table或者tableborde=“1”width=“400”height=“500”tableHTML的表格属性表格，单元格都有alignvalign属性align用于设置水平对齐方式，属性值有如下三个Left左对齐默认Right右对齐center居中对齐valign用于设置水平对齐方式，属性值有三个例如：tableborde=“1”width=“25％”align=“center”caption员工信息/captiontrtdalign=“center”姓名/tdtdalign=“center”联系电话/tdtdalign=“center”电子邮箱/td/trtableHTML的表格属性colspanrowspan属性用于单元格Colspan合并列数，当前行必须减少单元格保持表格完整rowspan合并行数，其他相关行必须减少单元格保持表格完整例如：tableborder=“1”trtd姓名/tdtdcolspan=“2”电话/td/trtrtd王某/tdtd123/[e-mail]/td/trtabletableborder=“1”trtdrowspan=“2”姓名/tdtd电话/td/[e-mail]/td/trtable列合并行合并HTML的表格属性bgcolorbackground属性设置背景颜色和图片bgcolor设置背景颜色,属性值为string类型或者RGB类型background设置背景图片,属性值为url地址例如：tableborder=“1”bgcolor=“red”trtdfirst/tdtdrow/td/trtrtdsecond/tdtdrow/td/trtablebgcolortableborder=“1”background=“./img/a.gif”trtdfirst/tdtdrow/td/trtrtdsecond/tdtdrow/td/trtablebackgroundHTML的表格属性cellpaddingcellspacing属性设置表格间距cellpadding设置表格内容与边框之间的距离cellspacing设置单元格之间的距离例如：tableborder=“1”cellpadding=“10”trtdfirst/tdtdrow/td/trtrtdsecond/tdtdrow/td/trtablecellpaddingtableborder=“1”cellspacing=“10”trtdfirst/tdtdrow/td/trtrtdsecond/tdtdrow/td/trtablecellspacing表格的空单元格单元格标签之间没有内容的显示情况tableborder=“1”trtdfirst/tdtdrow/td/trtrtdsecond/tdtd/td/trtable小结表格的属性Align水平对齐：左Left中Center右RightValign垂直对齐：topmiddlebottomWidth宽度Height高度Colspan列合并Rowspan行合并Border有无边框Cellspacing边框间距Cellpadding边框边距Background背景图片Bgcolor背景色Thinkyou