HTML 表格制作
HTML 表格制作是 HTML 中非常重要的一部分，它可以用来存放网页上的文本和图像。表格可以分成行、列、单元格，使用 TABLE、TR、TD 等标签来定义。
为什么使用表格？
表格应用场合非常广泛，如论坛、门户网站、购物网站等。论坛中可以用表格来显示用户信息，门户网站可以用表格来显示新闻、天气预报等信息，购物网站可以用表格来显示商品信息。
表格的基本结构
表格的基本结构由行、列、单元格组成。行由 TR 标签定义，列由 TH 或 TD 标签定义，单元格由 TD 标签定义。表格的基本语法如下：
<TABLE border="1">
<TR>
<TH>表头单元格内容</TH>
……
<TD>单元格内容</TD>
……
</TR>
……
</TABLE>
如何创建表格？
创建表格非常简单，首先需要定义表格的边框尺寸，然后定义表头和表格内容。例如：
<TABLE border="2">
<TR>
<TH>姓名</TH>
<TH>性别</TH>
<TH>学号</TH>
</TR>
<TR>
<TD>你的名字</TD>
<TD>你的性别</TD>
<TD>你的学号</TD>
</TR>
<TR>
<TD>王平</TD>
<TD>男</TD>
<TD>148081222</TD>
</TR>
</TABLE>
跨行跨列的表格
跨行跨列的表格可以使用 rowspan 和 colspan 属性来实现。例如：
<TABLE border="2">
<TR>
<TD colspan="3">学生成绩表</TD>
</TR>
<TR>
<TD>英语</TD>
<TD>数学</TD>
<TD>语文</TD>
</TR>
<TR>
<TD>95</TD>
<TD>98</TD>
<TD>89</TD>
</TR>
</TABLE>
在上面的例子中，第一行的单元格跨了三列。COLSPAN=“n” 属性表示跨多少列。
<TABLE border="1">
<TR>
<TD rowspan="3">早上菜谱</TD>
<TD>食物</TD>
<TD>鸡蛋</TD>
</TR>
<TR>
<TD>饮料</TD>
<TD>牛奶</TD>
</TR>
<TR>
<TD>甜点</TD>
<TD>开心粉</TD>
</TR>
</TABLE>
在上面的例子中，第一行的单元格跨了三行。ROWSPAN=“n” 属性表示跨多少行。
如何创建跨行跨列的表格？
创建跨行跨列的表格需要使用 rowspan 和 colspan 属性。例如：
<TABLE border="1">
<TR>
<TD>手机充值、IP卡</TD>
<TD colspan="2">办公设备、文具</TD>
</TR>
<TR>
<TD rowspan="2">各种卡的总汇</TD>
<TD>铅笔</TD>
<TD>彩笔</TD>
</TR>
<TR>
<TD>打印</TD>
<TD>刻录</TD>
</TR>
</TABLE>
如何美化修饰表格？
美化修饰表格可以从多方面入手，例如：
* 文字对齐方式
* 表格的高度和宽度
* 背景色
* 边框宽度和颜色
例如：
<TABLE width="400" height="200" border="15" bordercolor="red">
<TR>
<TD colspan="4">品牌商城</TD>
</TR>
<TR>
<TD colspan="2">笔记本电脑</TD>
<TD colspan="2">办公设备、文具、耗材</TD>
</TR>
<TR>
<TD>惠普</TD>
<TD>华硕</TD>
<TD>打印机</TD>
<TD>刻录盘</TD>
</TR>
</TABLE>
在上面的例子中，我们使用了 width、height、border 和 bordercolor 属性来美化修饰表格。
<TABLE background="images/type_back.jpg" width="360" height="120" border="2">
<TR>
<TD colspan="6"> </TD>
</TR>
<TR bgcolor="#EBEFFF">
<TD colspan="2">笔记本电脑</TD>
<TD colspan="2" bgcolor="yellow">办公设备、文具、耗材</TD>
</TR>
……
</TABLE>
在上面的例子中，我们使用了 background 属性来设置表格的背景图片。
评论0
最新资源