首页 > 网站 > WEB开发 > 正文

html之表格标签

2024-04-27 15:13:46
字体:
来源:转载
供稿:网友
一,表格标签
<!-- 过去大部分的网站都是表格标签做的,一个时代的代表,现在基本不用了 表格标签: 1,格式:<table> <tr> <td>需要显示的内容</td> </tr> </table> table:代表整个表格 tr:代表整个表格中的一行数据->行 td:代表一行数据张的一个单元格->列 2,注意点: (1),表格标签有边框属性,默认是0,设置border值才能才能显示--><table border="1"> <tr></tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> <tr></tr> <tr></tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <tr></tr></table>
二,表格标签的属性
<!-- 1,宽度和高度的属性(可以按照内容的多少自动调整宽高) 可以给table和td标签使用,tr标签是不能使用的 2,水平对齐和垂直对齐属性 (1)水平对齐:aling,只能给table和tr标签使用 (2)垂直对齐:valing,只能给tr和td标签使用 3,外边距和内边距属性 (1)外边距:cellspacing,单元格与单元格之间的间距,也包括单元格与table边框的间距,他们是统一的 (2)内边距:cellpadding,填充内容与单元格之间的距离,这个距离是根据对齐方式来的,比如说是右对齐,那么就是距离右边的距离是xxpx 只能给table标签使用,tr和td标签不能使用 注意在企业开发中,表格使用CSS和div做的,这里只是了解一下--><table border="1" width="500px" height="300px" align="center" cellspacing="5px" cellpadding="30px"> <tr valign="top"> <td valign="bottom" width="150" height="50">1.1</td> <td>1.2</td> </tr> <tr align="center"> <td align="right">2.1</td> <td valign="bottom">2.2</td> </tr></table>
三,细线表格
<!-- 在表格标签中通过设置外边距的距离想让边框是一条线是不靠谱的,视觉上会出现两条线 所以,一般会先设置table的背景颜色,然后再设置tr的背景颜色,最后调整外边距的距离就可以了 以上内容了解,企业开发不会用的--><table bgcolor="black" cellspacing="1"> <tr bgcolor="white"> <td>1.1</td> <td>1.2</td> </tr> <tr bgcolor="white"> <td>2.1</td> <td>2.2</td> </tr></table>
五,表格标签其他的属性

这里写图片描述

<!-- 表格标题标签 caption 1,格式:<caption></caption> 2,注意点 (1)caption标签只能放在table标签里面,放在外边无效 (2)caption标签一定要紧跟在table标签后边 单元格标题标签 th 1,格式: <th></th> 单元格标签有两种, 一种是td,普通的单元格标签 一种是th,每一列单元格的标题标签,默认是加粗,居中的--><table bgcolor="black" cellspacing="1" width="800px" align="center"> <caption> <h2>今日小说排行榜</h2> </caption> <tr bgcolor="#d3d3d3"> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td>走高</td> <td>23654523</td> <td>52614432</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td>走高</td> <td>23654523</td> <td>52614432</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td>走高</td> <td>23654523</td> <td>52614432</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td>走高</td> <td>23654523</td> <td>52614432</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td>走高</td> <td>23654523</td> <td>52614432</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr></table>
六,单元格合并
<!-- 1,水平方向的单元格合并 可以给td标签添加colspan属性(合并单元格的意思) 例如,<td colspan="2"></td>,把当前的单元格按照2个单元个看待 2,垂直方向的单元格合并 可以给td标签添加rowspan属性,(单元格占得行数) 例如,<td rowspan="2"></td> 把当前的单元格向下合并两个单元格,并且要删除单枪单元格下面的一个单元格--><!--<table bgcolor="black" width="500px" height="300px">--> <!--<tr bgcolor="white">--> <!--<td colspan="2"></td>--> <!--<td></td>--> <!--<td></td>--> <!--</tr>--> <!--<tr bgcolor="white">--> <!--<td></td>--> <!--<td></td>--> <!--<td></td>--> <!--</tr>--> <!--<tr bgcolor="white">--> <!--<td></td>--> <!--<td></td>--> <!--<td colspan="2"></td>--> <!--</tr>--><!--</table>--><table bgcolor="black" width="500px" height="300px"> <tr bgcolor="white"> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr bgcolor="white"> <td></td> <td></td> <!--<td></td>--> </tr> <tr bgcolor="white"> <td></td> <td></td> <td></td> </tr></table>
上一篇:css选择器大全

下一篇:ContentType与MIME

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表