2-10. 表格

1、表格标签的基本使用
绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表http://2002.sina.com.cn/

2、表格的作用:用来给一堆数据添加表格语义
其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

3、表格格式

<table>
    <tr>
        <td>需要显示的内容</td>
    </tr>
</table>
  • table代表整个表格, 也就是一堆table标签就是一个表格
  • tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行
  • td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

4、注意点

  • 表格标签有一个边框属性, 这个属性决定了边框的宽度,默认情况下这个属性的值是0, 所以看不到边框。
  • 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现,要么一起不出现,不会单个出现。
<!--
表格:有行,有列
table: 和Excel表类似,有行,有列
tr:table row 表格行,在table中有几个tr就会有几个行
td:table data 表格数据,在table中有row中td个数最多的决定table中的最大列数
table tr td 是做为一个整体所以用
tr和td不能单独使用
table标签中只包含tr标签
tr中一般只包含td标签
td 标签中可以放其他标签来丰富内容,也可以放table标签
属性:
border:边框
width:宽
height:高
快速调整代码格式:ctrl+alt+L
-->

<table border="1px" width="200px" height="200px">
    <tr>
        <td>张三</td>
        <td>李四</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>李四</td>
    </tr>
    <tr>
        <td>
            <img src="pic.jpg" width=100>
        </td>
        <td>
           <table border=1>
               <tr><td>ddddd</td></tr>
               <tr><td>ddddd</td></tr>
           </table>
        </td>
    </tr>
</table>
</body>
图片.png

http://www.w3school.com.cn/html/html_tables.asp
http://www.w3school.com.cn/tags/tag_table.asp

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容