标签：语文 表格 单元格 HTML nbsp 跨行 table
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。