表格标签也是一种复合标签。
由:table,tr,td,th,thead,tbody组合,由行和列组合成,行和列交叉的地方就是单元格
表格相关属性:
table:
border:边框
width:宽度
height:高度
align:整个表格的排版left,center,right
bgcolor:作用于整个表的背景颜色
tr:行
height:行高
bgcolor:作用于一整行的背景色
align:作用于一整行的内容的水平排版left,center,right
valign:作用于一整行的内容的垂直排版top,middle,bottom
td:列
width:列宽
bgcolor:作用于单元格的背景色
align:作用于单元格的内容的水平排版left,center,right
valign:作用于单元格的内容的垂直排版top,middle,bottom
table
tr
td数据/td
td数据/td
/tr
tr
td数据/td
td数据/td
/tr
/table
示例:
!DOCTYPEhtml
html
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
tr
td姓名/td
td性别/td
td年龄/td
td地址/td
/tr
tr
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
tr
tdrose/td
tdgirl/td
td18/td
td绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
tr
th姓名/th
th性别/th
th年龄/th
th地址/th
/tr
tr
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
tr
tdrose/td
tdgirl/td
td18/td
td绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"
th姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="40px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="40px"
tdrose/td
tdgirl/td
td18/td
td绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="40px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="40px"
tdrose/td
tdgirl/td
td18/td
td绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="40px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="40px"
tdrose/td
tdgirl/td
td18/td
td绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
td绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
tdvalign="top"绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
tdvalign="bottom"绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"bgcolor="blue"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
tdvalign="bottom"绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
!--border是边框的意思--
trheight="60px"bgcolor="yellow"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
tdvalign="bottom"绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"bgcolor="pink"
!--border是边框的意思--
trheight="60px"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
tdvalign="bottom"绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"bgcolor="pink"
!--border是边框的意思--
trheight="60px"bgcolor="grey"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
tdvalign="bottom"绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"bgcolor="pink"
!--border是边框的意思--
trheight="60px"bgcolor="grey"
thwidth="px"姓名/th
th性别/th
th年龄/th
th地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
tdvalign="bottom"bgcolor="green"绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"
trheight="60px"bgcolor="grey"
th姓名/th
th性别/th
th年龄/th
th省份/th
th城市/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td四川/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
td四川/td
td绵阳/td
/tr
/table
/body
/html
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"cellspacing="0px"
trheight="60px"bgcolor="grey"
th姓名/th
th性别/th
th年龄/th
th省份/th
th城市/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td四川/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
td四川/td
td绵阳/td
/tr
/table
/body
/html
表格的合并:
行列合并都作用于td/th
列合并:colspan="n",表示合并n列
行合并:rowspan="n",表示合并n行
行合并:
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"cellspacing="0px"
trheight="60px"bgcolor="grey"
th姓名/th
th性别/th
th年龄/th
thcolspan="2"地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
td四川/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
td四川/td
td绵阳/td
/tr
/table
/body
/html
列合并:
!DOCTYPEhtml
htmllang="en"
head
metacharset="utf-8"
title/title
/head
body
tableborder="1px"width="px"cellspacing="0px"
trheight="60px"bgcolor="grey"
th姓名/th
th性别/th
th年龄/th
thcolspan="2"地址/th
/tr
trheight="50px"
tdjack/td
tdboy/td
td20/td
tdrowspan="2"四川/td
td成都/td
/tr
trheight="50px"
tdrose/td
tdgirl/td
td18/td
td绵阳/td
/tr
/table
/body
/html
#新手帮扶计划#