商丘做网站seo,企业手机微网站系统php,网站开发设计各部门职责,网站备案率是什么一、表格 1-1、创建表格 在Word文档中#xff0c;如果要创建表格#xff0c;只需插入表格#xff0c;然后设定相应的行数和列数即可。然而在HTML网页中#xff0c;所有的元素都是通过标签定义的#xff0c;要想创建表格#xff0c;就需要使用与表格相关的标签。使用标签… 一、表格 1-1、创建表格 在Word文档中如果要创建表格只需插入表格然后设定相应的行数和列数即可。然而在HTML网页中所有的元素都是通过标签定义的要想创建表格就需要使用与表格相关的标签。使用标签创建表格的基本语法格式如下 table tr td单元格内的文字/td …… /tr …… /table 上述语法格式中包含3个HTML标签分别为table、tr、td它们是创建HTML表格的基本标签缺一不可对这些标签的具体解释如下 table用于定义一个表格的开始与结束其内部可以放置表格的行、单元格等。tr用于定义表格中的一行必须嵌套在table标签中table标签中包含几个tr标签就表示表格有几行。td用于定义表格中的单元格必须嵌套在tr标签中一个tr标签中包含几个td标签就表示一行中有多少个单元格或多少列。 注意 tr标签中只能嵌套td标签不可以直接再tr标签中输入文字。 代码展示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表格/title
/head
bodytable border1!--为表格标签设置边框属性border--trtd学生名称/tdtd班级/tdtd分数/td/trtrtd小明/tdtd一班/tdtd87/td/trtrtd小李/tdtd二班/tdtd86/td/trtrtd小萌/tdtd三班/tdtd72/td/tr/table
/body
/html 效果 1-2、table标签的属性 【1】border、cellspacing、cellpadding属性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表格/title
/head
bodytable border20 cellspacing20 cellpadding20!--为表格标签设置边框属性border--trtd学生名称/tdtd班级/tdtd分数/td/trtrtd小明/tdtd一班/tdtd87/td/trtrtd小李/tdtd二班/tdtd86/td/trtrtd小萌/tdtd三班/tdtd72/td/tr/table
/body
/html
效果展示 【2】width和height属性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表格/title
/head
bodytable border20 cellspacing20 cellpadding20 width 500 height500!--为表格标签设置边框属性border--trtd学生名称/tdtd班级/tdtd分数/td/trtrtd小明/tdtd一班/tdtd87/td/trtrtd小李/tdtd二班/tdtd86/td/trtrtd小萌/tdtd三班/tdtd72/td/tr/table
/body
/html 【3】align、bgcolor、background属性
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title表格/title
/head
bodytable border20 cellspacing20 cellpadding20 width 500 height500 bgcolorgreen backgroundimg/1.jpg!--为表格标签设置边框属性border--trtd学生名称/tdtd班级/tdtd分数/td/trtrtd小明/tdtd一班/tdtd87/td/trtrtd小李/tdtd二班/tdtd86/td/trtrtd小萌/tdtd三班/tdtd72/td/tr/table
/body
/html 1-3、tr标签属性 注意tr标签无宽度属性width其宽度取决于表格标签table !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title标签的属性/title
/head
bodytable border1 width400 height240 aligncentertr height80 aligncenter valigntop backgroundimages/1.jpgtd姓名/tdtd性别/tdtd电话/tdtd住址/td/trtrtd小王/tdtd女/tdtd11122233/tdtd海淀区/td/trtrtd小李/tdtd男/tdtd55566677/tdtd朝阳区/td/trtrtd小张/tdtd男/tdtd88899900/tdtd西城区/td/tr/table
/body
/html
效果展示 1-4、td标签的属性 代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title单元格的合并/title
/head
bodytable border1 width400 height240 aligncentertr height80 aligncenter valigntop bgcolor#00CCFFtd姓名/tdtd性别/tdtd电话/tdtd住址/td/trtrtd小王/tdtd女/tdtd11122233/tdtd rowspan3北京/td !-- 设置单元格跨越的行数 --/trtrtd小李/tdtd男/tdtd55566677/td/trtrtd小张/tdtd男/tdtd88899900/td/tr/table
/body
/html
效果展示 1-5、th标签 1-6、表格的结构 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title简单的网页结构/title
/head
bodytable width600 border1 cellspacing0 aligncenterthead !-- 使用thead标签定义网页的头部 --trtd colspan3网站的Logo/td/trtrth首页/thth关于我们/thth联系我们/th/tr/theadtfoot !-- 使用tfoot标签定义网页的页脚 --trtd colspan3 aligncenter底部基本企业信息 copy; 【版权信息】/td/tr/tfoottbody !-- 使用tbody标签定义网页的主体 --tr height150td主体的左栏/tdtd主体的中间/tdtd主体的右侧/td/trtr height150td主体的左栏/tdtd主体的中间/tdtd主体的右侧/td/tr/tbody/table
/body
/html
效果展示 二、使用CSS控制表格样式
2-1、使用CSS控制表格边框
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title使用 CSS 控制表格边框/titlestyle typetext/csstable {width: 800px;height: 300px;border: 1px solid #30F; /* 设置表格的边框 *//* border-collapse: collapse; */}th, td {border: 1px solid #30F;}/style
/head
bodytablecaption/caption !-- 定义表格的标题 --trth诗歌序号/thth诗歌名称/thth作者/thth内容/th/trtrth1/thtd《峨眉山月歌》/tdtd李白/tdtd峨眉山月半轮秋影入平羌江水流。夜发清溪向三峡思君不见下渝州。/td/trtrth2/thtd《江南逢李龟年》/tdtd杜甫/tdtd岐王宅里寻常见崔九堂前几度闻。正是江南好风景落花时节又逢君。/td/trtrth3/thtd《行军九日思长安故园》/tdtd岑参/tdtd强欲登高去无人送酒来。遥怜故园菊应傍战场开。/td/trtrth4/thtd《夜上受降城闻笛》/tdtd李益/tdtd回乐烽前沙似雪受降城外月如霜。不知何处吹芦管一夜征人尽望乡。/td/trtrth5/thtd《秋夕》/tdtd杜牧/tdtd银烛秋光冷画屏轻罗小扇扑流萤。天阶夜色凉如水卧看牵牛织女星。/td/tr/table
/body
/html 从展示效果中可以看出单元格的边框之间存在一定的空间若要去掉这个空间得到单线边框的效果可以使用border-collapse属性将单元格的边框合并。 将第十三行代码注释去掉可得到以下效果 border-collapse 的属性值除了collapse用于合并边框之外还有separate用于分离单线边框通常表格的border-collapse属性值默认为separate。 注意当表格的border-collapse的属性值设为collapse时在HTML中设置的cellspacing属性值无效。 行标签tr无border样式属性。 2-2、使用CSS控制单元格边距 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title使用 CSS 控制单元格边距/titlestyle typetext/csstable {border: 1px solid #30F; /* 设置表格的边框 */}th, td {border: 1px solid #30F; /* 为单元格单独设置边框 */padding: 50px; /* 为单元格内容与边框之间设置 50px 的内边距 */margin: 50px; /* 为单元格与单元格边框之间设置 50px 的外边距 */}/style
/head
bodytabletrth网络安全问题/thth解决方案/thth解决办法/th/trtrth渗透问题/thtd渗透测试/tdtd渗透测试工程师将利用精湛的技能和先进的技术对系统及应用程序的安全性进行识别和检测。/td/trtrth漏洞问题/thtd漏洞评估/tdtd查找并分析内网、外网及云端的漏洞。/td/tr/table
/body
/html
效果展示 2-3、使用CSS控制单元格的宽度和高度
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title使用 CSS 控制单元格的宽度和高度/titlestyle typetext/csstable {border: 1px solid #30F; /* 设置表格的边框 */border-collapse: collapse; /* 合并边框 */}th, td {border: 1px solid #30F; /* 为单元格单独设置边框 */}.one { width: 100px; height: 80px; } /* 定义“A 房间”单元格的宽度与高度 */.two { height: 40px; } /* 定义“B 房间”单元格的高度 */.three { width: 200px; } /* 定义“C 房间”单元格的宽度 *//style
/head
bodytabletrtd classoneA 房间/tdtd classtwoB 房间/td/trtrtd classthreeC 房间/tdtd classfourD 房间/td/tr/table
/body
/html
效果展示
