首页 > 代码库 > HTML表格标签
HTML表格标签
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>表格标签1</title> 6 </head> 7 8 <body> 9 <!-- 10 table标签的用途： 11 在表格中放图片，或用于布局 12 13 table制作过程: 14 1.先分析表格有多少行 15 2.分析有多少列 16 3.做好表格的基本之后再添加表格需要的一些属性 17 table：表格标签 18 属性: 19 width:可以固定表格的宽度，单位可以用像素或百分比 20 height：可以定义表格的高度 21 bgcolor:表格背景色 22 background：背景图片 23 border：设置边框的宽度，默认为0 24 bordercolor：表格边框的颜色 25 cellpadding:设置表格单元格边框与其内部内容之间空间的大小，默认为2 26 cellspacing：表格单元格之间的空间大小（单元格之间的间距） 27 align:设置表格的对齐方式（left center right） 28 bordercolorlight:设置边框亮部分的颜色（当border的值大于或等于1才有用） 29 bordercolordark:设置边框暗部分的颜色（当border的值大于或等于1才有用） 30 31 设置行：<tr>..</tr> 32 设置标题的栏位(单元格):<th>..</th> 33 设置数据的栏位（单元格）： <td>..</td> 34 --> 35 <table> 36 <tr> 37 <td> 38 姓名：张三 39 </td> 40 </tr> 41 <tr> 42 <td> 43 年龄：33 44 </td> 45 </tr> 46 </table> 47 48 49 <hr/> 50 51 <table width="800" border="1" cellpadding="0" cellspacing="0" bordercolor="#CC0000" align="center"> 52 <tr> 53 <th>语文</th> 54 <th>数学</th> 55 <th>外语</th> 56 <th>化学</th> 57 <th>物理</th> 58 <th>生物</th> 59 <th>政治</th> 60 <th>历史</th> 61 <th>地理</th> 62 </tr> 63 <tr> 64 65 <td>90</td> 66 <td>98</td> 67 <td>80</td> 68 <td>89</td> 69 <td>91</td> 70 <td>89</td> 71 <td>78</td> 72 <td>87</td> 73 <td>86</td> 74 </tr> 75 </table> 76 77 </body> 78 </html>
特殊效果的表格：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>表格标签2</title> 6 </head> 7 <!-- 8 单元格的属性：align：设置单元格的水平对齐方式 9 valign：设置单元格的垂直对齐方式 10 rowspan：行合并的数目 11 colspan：列合并的数目 12 nowarp：设置单元格中不换行 13 --> 14 <body> 15 <center> 16 <ol> 17 <li>基础表格 </li> 18 <table border="1" cellspacing="0" width="500" cellpadding="5"> 19 <tr> 20 <td>影视广告</td> 21 <td>网页设计</td> 22 <td>动画设计</td> 23 </tr> 24 <tr> 25 <td>软件开发</td> 26 <td>网站建设</td> 27 <td>网站推广</td> 28 </tr> 29 <tr> 30 <td>平面设计</td> 31 <td>安卓开发</td> 32 <td>前台美工</td> 33 </tr> 34 </table> 35 36 <hr /> 37 38 <li> 合并多列表格</li> 39 <table border="1" cellspacing="0" width="500" cellpadding="5"> 40 <tr> 41 <td colspan="3" align="center" valign="top">影视广告</td> 42 </tr> 43 <tr> 44 <td>软件开发</td> 45 <td>网站建设</td> 46 <td>网站推广</td> 47 </tr> 48 <tr> 49 <td>平面设计</td> 50 <td>安卓开发</td> 51 <td>前台美工</td> 52 </tr> 53 </table> 54 55 56 <hr /> 57 58 <li>合并多行表格 </li> 59 <table border="1" cellspacing="0" width="500" cellpadding="5"> 60 <tr> 61 <td rowspan="3" align="center" valign="bottom">影视广告</td> 62 <td>网页设计</td> 63 <td>动画设计</td> 64 </tr> 65 <tr> 66 <td>软件开发</td> 67 <td>网站建设</td> 68 69 </tr> 70 <tr> 71 <td>平面设计</td> 72 <td>安卓开发</td> 73 74 </tr> 75 </table> 76 77 <hr /> 78 <li>复杂表格1 </li> 79 <table border="1" cellspacing="0" width="500" cellpadding="5"> 80 <tr> 81 <td>影视广告</td> 82 <td colspan="2" align="center">网页设计</td> 83 84 </tr> 85 <tr> 86 <td>软件开发</td> 87 <td rowspan="2">网站建设<br/>前台美工</td> 88 <td>网站推广</td> 89 </tr> 90 <tr> 91 <td>平面设计</td> 92 <td>安卓开发</td> 93 94 </tr> 95 </table> 96 97 <hr /> 98 99 100 <li>复杂表格2 </li> 101 <table border="1" cellspacing="0" width="500" cellpadding="5"> 102 <tr> 103 <td>影视广告</td> 104 <td >网页设计</td> 105 <td>动画设计</td> 106 </tr> 107 <tr> 108 <td colspan="2">软件开发 网站推广</td> 109 <td rowspan="2">网站建设<br/>前台美工</td> 110 111 </tr> 112 <tr> 113 <td>平面设计</td> 114 <td>安卓开发</td> 115 116 </tr> 117 </table> 118 119 <hr /> 120 121 </ol> 122 </center> 123 </body> 124 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>表格标签</title> 6 </head> 7 <!-- 8 9 --> 10 <body bgcolor="#CC9933"> 11 <li>凸起效果表格 </li> 12 <table width="500" border="1" cellpadding="5" bgcolor="#999999" bordercolordark="#000000" bordercolorlight="#FFFFFF"> 13 <tr bordercolordark="#FFFFFF" bordercolorlight="#000000"> 14 <td>影视广告</td> 15 <td>网页设计</td> 16 <td>动画设计</td> 17 </tr> 18 <tr bordercolordark="#FFFFFF" bordercolorlight="#000000"> 19 20 <td>软件开发</td> 21 <td>网站建设</td> 22 <td>网站推广</td> 23 </tr> 24 <tr bordercolordark="#FFFFFF" bordercolorlight="#000000"> 25 <td>平面设计</td> 26 <td>安卓开发</td> 27 <td>前台美工</td> 28 </tr> 29 </table> 30 <hr /> 31 32 33 <li>凸起效果表格 </li> 34 <table width="500" border="1" cellpadding="5" bgcolor="#999999" bordercolordark="#000000" bordercolorlight="#999999"> 35 <tr> 36 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">影视广告</td> 37 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">网页设计</td> 38 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">动画设计</td> 39 </tr> 40 <tr> 41 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">软件开发</td> 42 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">网站建设</td> 43 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">网站推广</td> 44 </tr> 45 <tr> 46 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">平面设计</td> 47 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">安卓开发</td> 48 <td bordercolordark="#000000" bordercolorlight="#FFFFFF">前台美工</td> 49 </tr> 50 </table> 51 <hr /> 52 53 <!-- 54 细线表格效果的过程：将表格自身的粗细去掉 border=0， 设置表格的背景颜色，设置表格与单元格之间的距离cellspacing="1"，给每个tr设置bgcolor颜色 55 --> 56 <li>细线表格效果 </li> 57 <table border="0" cellspacing="1" width="500" cellpadding="5" bgcolor="#000000"> 58 <tr bgcolor="#FFFFFF"> 59 <td>影视广告</td> 60 <td>网页设计</td> 61 <td>动画设计</td> 62 </tr> 63 <tr bgcolor="#FFFFFF"> 64 <td>软件开发</td> 65 <td>网站建设</td> 66 <td>网站推广</td> 67 </tr> 68 <tr bgcolor="#FFFFFF"> 69 <td>平面设计</td> 70 <td>安卓开发</td> 71 <td>前台美工</td> 72 </tr> 73 </table> 74 </body> 75 </html>
课程表实例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>表格标签</title> 6 </head> 7 8 <body> 9 <table border="1" width="600" cellpadding="6" cellspacing="0"> 10 <tr align="center"> 11 <td>项目</td> 12 <td colspan="5">上课</td> 13 14 <td colspan="2">休息</td> 15 </tr> 16 17 <tr align="center"> 18 <td>星期</td> 19 <td>星期一</td> 20 <td>星期二</td> 21 <td>星期三</td> 22 <td>星期四</td> 23 <td>星期五</td> 24 <td>星期六</td> 25 <td>星期日</td> 26 </tr> 27 28 <tr align="center"> 29 <td rowspan="4">上午</td> 30 <td>语文</td> 31 <td>数学</td> 32 <td>英语</td> 33 <td>英语</td> 34 <td>物理</td> 35 <td>计算机</td> 36 <td rowspan="4">休息</td> 37 </tr> 38 39 40 <tr align="center"> 41 <td>数学</td> 42 <td>数学</td> 43 <td>地理</td> 44 <td>历史</td> 45 <td>计算机</td> 46 <td>化学</td> 47 48 49 </tr> 50 51 <tr align="center"> 52 <td>生物</td> 53 <td>地理</td> 54 <td>历史</td> 55 <td>化学</td> 56 <td>语文</td> 57 <td>语文</td> 58 59 60 </tr> 61 62 <tr align="center"> 63 <td>数学</td> 64 <td>数学</td> 65 <td>英语</td> 66 <td>英语</td> 67 <td>地理</td> 68 <td>物理</td> 69 70 71 </tr> 72 73 <tr align="center"> 74 <td rowspan="2">下午</td> 75 <td>物理</td> 76 <td>化学</td> 77 <td>生物</td> 78 <td>地理</td> 79 <td>历史</td> 80 <td>计算机</td> 81 <td rowspan="2">休息</td> 82 </tr> 83 84 <tr align="center"> 85 <td>物理</td> 86 <td>历史</td> 87 <td>语文</td> 88 <td>数学</td> 89 <td>英语</td> 90 <td>计算机</td> 91 92 93 </tr> 94 </table> 95 </body> 96 </html>
HTML表格标签
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。