HTML 标签(表格)

最新推荐文章于 2024-07-12 00:07:26 发布

weixin_49007365

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量676

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_49007365/article/details/118599336

版权

HTML 标签(表格)

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义）每行被分割为若干单元格（由<td>标签定义）字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table标签是一个不能自由嵌套的块级元素，table只允许嵌套<caption>、<tr> 、结构化标签如thead、tbody、tfooter、等标签除此以外，所有嵌套在table标签内部的元素和文本都会被渲染table元素之前。

关于表格：

table标签，表示表格
tr标签，表示表格的行
td标签，表示表格的单元格

a、td标签是单元格

b、被td标签包裹的文本不会加粗，但是水平方向居左显示，垂直方向居中显示

c、colspan属性，向th标签，表示表头单元格

a、th标签也是单元格

b、一般作为表格的第一行(作为表格的头部)

c、被th标签包裹的文本会加粗，并且水平和垂直方向都居中显示

th	th	th	th
td	td	td	td
td	td	td	td
td	td	td	td

格式：

     <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>         
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>         
        </tr>
     </table>

元素支持的属性：

属性名称	属性值	说明
border	像素	设置表格的边框线，被舍弃CSS border 替代
cellspacing	像素 / 百分比	规定单元格之间的距离，被舍弃 CSS border-spacing 替代
cellpadding	像素 / 百分比	规定单元格边沿与其内容之间的距离，被舍弃 CSS padding 替代
width	像素 / 百分比	表格宽度，被舍弃 CSS width替代
height	像素 / 百分比	表格的高度，被舍弃 CSS height 替代
summary	字符串	用来描述表格数据说明被舍弃使用元素代替，设置caption标签，放到table内部的第一行, 作为表格的标题

<th>和<td>标签的常用属性

属性名称	属性值	适用元素	说明
width	像素 / 百分比	th，td	设置高被舍弃
height	像素 / 百分比	th，td	设置高被舍弃
colspan	正整数	th，td	规定向右合并时，单元格可横跨的列数—跨列
rowspan	正整数	th，td	规定向下合并时，单元格可横跨的列数—跨行
scope	row / col /rowgroup / colgroup (默认)	th，td	本质上指定表头的轴。默认情况下，标题是列的标题，这是典型的，但行也可能以标题开头，您可以将该标题的范围限定为行或行组。

表格的重点难点，"拆分合并单元格"

概念：<th>和<td>标签都具有两个重要属性： colspan 和 rowspan 。它们接受2或更大的任何正整数。如果td的colspan为2(即<td colspan="2">)，则它仍将是一个单元格，但它将水平占据一行中两个单元格的空间。rowspan与colspan相似但垂直占据。

(1)、rowspan 向下方向合并单元格,取值数值,需要合并几个单元格,这个数值就写几【跨行，删除的也是其他行的单元格内容】

(2)、colspan 向右方向合并单元格,取值数值,需要合并几个单元格,这个数值就写几【跨列，删除的也是本行的单元格内容】

(3)、合并单元格的步骤:

先找到你要合并的单元格
然后确定是需要左右合并单元格,还是需要上下合并单元格,再决定使用对应的colspan属性或者rowspan属性,设置数值，需要合并几个单元格,这个数值就写几
最后注释掉(删除)多余的单元格

代码示范:

   <table  width="20%" height="200"  border="0" cellspacing="0">
           <tr>
               <td colspan="2" bgcolor="red"></td>
               <!-- <td></td> -->
               <td rowspan="2"bgcolor="green"></td>
           </tr>
           <tr>
            <td rowspan="3" bgcolor="blue"></td>
            <!-- <td ></td> -->
            <td bgcolor="pik"></td>
        </tr>
        <tr>
           
            <!-- <td ></td > -->
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="2"  rowspan="2" bgcolor="#0f0"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>

效果图：

表格的标题：

HTML为表格提供了

元素用来做表格的标题，一般情况下会被作为table的第一个标签。但是该标签可以放在table任意地方，最终显示显示时都会出现在table的最上方。

表格的结构化：

HTML提供了

用来包装table结构，更清晰的表示表头表尾，表格的结构化增强了表格的语义化。为了让大表格(table)在下载时，能分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解析的，使用tbody标签可以优化显示。如果表格很长，用tbody标签进行分段，可以一部分一部分地显示，不需等整个表格都下载完成。下载一块就显示一块，特别是当表格巨大时有比较好的效果。

tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。

thead　表格的头用来放标题之类的东西
tbody　表格的身体放数据本体

a、对表格进行分块

b、可以加快表格的渲染速度

c、加载多少块就渲染多少表格

tfoot 表格的脚放表格的脚注之类；

案例：

css样式：

  dt {
            margin: 0;
            text-align: center;
            color: #6262ff;
        }

        dd {
            margin: 0;
            text-align: center;
            color: #666;
        }
      table td img{
            width:120px;
        }

 <table border="1" cellspacing="0" cellpadding="">

        <tr>


            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>完美世界</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>
            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>大主宰</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>
            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>斗破苍穹</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>
            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>绝世唐门</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>

        </tr>
        <tr>

            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>斗罗大陆</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>
            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>校花的贴身高手</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>
            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>武动乾坤</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>
            <td><img src="/images/sgyy.jpg" alt="">
                <dl>
                    <dt>遮天</dt>
                    <dd>794609人推荐</dd>
                </dl>
            </td>

        </tr>
    </table>