HTML表格
作者：互联网
1.基本属性
<!-- border 设置边框线的粗细 -->
<!-- tb 表标题 -->
<!-- colspan 后面的数字是多少就包括多少列-->
<!-- rowspan 后面的数字是多少就包括多少行-->
<!-- caption 表头-->表格标签(table)的基本语法
table:表格容器
tr:列
td:单元格
th:粗体
caption:标题列
【例子】<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2">①cellspacing="2"
表格格线厚度。②cellpadding="2"
文字与格线的距离
③align="CENTER"
表格的摆放位置（水平），可选值为： left, right, center。
④valign="TOP".
表格内字画等的摆放贴 位置（垂直），可选值为： top, middle, bottom。
【跨行跨列例子】colspan、rowspan
表格(table)与表单(form)的综合运用
2.不会跨行的表格（基本表格）
<table border="2"> 1.不会跨行的表格（基本表格） <tr> <td>1行1列的单元格</td> <td>1行2列的单元格</td> <td>1行3列的单元格</td> </tr> <tr> <td>2行1列的单元格</td> <td>2行2列的单元格</td> <td>2行3列的单元格</td> </tr> </table>
3.跨列的表格（跨行的那一列长一些，可包括多个值）
<table width="200" border="1"> <tr> <tb>学生成绩</tb> <td colspan="3">学生成绩</td> </tr> <tr> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> </table>
4. 跨行的表格 (跨行的那一行长一些，可包括多个值)
<table width="200" border="1"> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> --> <!-- <!-- <tr> --> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>91</td> </tr> </table> <P></P> <table width="500" border="1"> <tr> <td colspan="3">家用电器</td> </tr> <tr> <td>家用电器</td> <td>大家电</td> <td>洗衣机</td> </tr> <tr> <td>电热水器</td> <td>家庭音响</td> <td>热水器</td> </tr> <tr> <td colspan="3">书籍</td> </tr> <tr> <td>文学</td> <td>传记</td> <td>艺术</td> </tr> <tr> <td>军事</td> <td>财经</td> <td>世界名著</td> </tr> </table> <p></p>
5.跨行跨列的表格
<table width="500" border="1"> <tr> <td rowspan="2">收藏</td> <td>钱币</td> <td>紫砂</td> <td>瓷器</td> </tr> <tr> <td>古玩</td> <td>和田玉</td> <td>字画</td> </tr> <tr> <td>家居</td> <td>灯具</td> <td>自行车</td> <td>皮包</td> </tr> </table> <p></p> <table width="200" border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>91</td> </tr> </table>
6.tfoot等分组用法 ()
<table width="30%"> <caption>年终数据报表</caption> <!-- 设置表头 --> <thead style="background-color: aqua;"> <tr> <th>月份</th> <th>收入（RMB）</th> </tr> </thead> <tbody style="background-color: #9CC;"> <tr> <td>一月</td> <td>100</td> </tr> <tr> <td>2月</td> <td>80</td> </tr> <tr> <td>3月</td> <td>300</td> </tr> <tr> <td>4月</td> <td>400</td> </tr> <tr> <td>5月</td> <td>100</td> </tr> <tr> <td>6月</td> <td>200</td> </tr> </tbody> </thead> </tbody> <tfoot style="background: #FF0"> <tr> <td>平均月收入</td> <td>196.67</td> </tr> <tr> <td>总计</td> <td>1180</td> </tr> </tfoot> </table> <p></p>
7. 表格图文布局
<table border="1px"> <tr> <td colspan="2"><img src="img/a_title.jpg" alt="公告栏"></td> </tr> <td rowspan="4"><img src="img/a_left.jpg" alt="公告左侧图" /></td> <td>大学要求老师开网店</td> </tr> <tr> <td>安全锤网上大热销</td> </tr> <tr> <td>商城竟成网购试衣间</td> </tr> <tr> <td>2万网上开十间连锁店</td> </tr> </table> <p></p>
8.登录表单
<form method="post" action="login_success.htm"></form> <table> <tr> <td><img src="img/title_login_2.png" alt="alt" /></td> <td colspan="2"> </td> </tr> <tr> <td></td> <td>会员名:</td> <td> <input name="sname" type="text" size="15" />（可包含 a-z、0-9 和下划线） </td> </tr> <tr> <td></td> <td>密 码:</td> <td><input name="pass" type="password" size="15" />（至少包含 6 个字符）</td> </tr> <tr> <td></td> <td colspan="2"> <input type="image" style="border:0px;" name="Button" src="./img/login.gif" /> </td> </tr> </table> <p></p>
9.表格嵌套
<table border="10"> <tr> <td> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> <table border="2"> <tr> <td width="25px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> </tr> </table> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> </td> <td> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> <table border="2"> <tr> <td width="25px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> </tr> </table> <table border="2"> <tr> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="50px"> </td> <td width="25px"> </td> </tr> </table> </td> </tr> </table> </body>
标签：语文,表格,单元格,HTML,nbsp,跨行,table 来源： https://blog.csdn.net/qq_62881798/article/details/122292512