table表格讲解

最新推荐文章于 2025-01-16 23:23:56 发布

前端韦小宝

最新推荐文章于 2025-01-16 23:23:56 发布

阅读量903

点赞数 3

文章标签： servlet html java

本文链接：https://blog.csdn.net/lou15516575959/article/details/126744464

版权

表格分为2部分：一是行用<tr></tr>表示，二是列用<td></td>表示。

基本格式

<html>
    <head></head>
    <body>
       <table>
           <tr>
               <td>安其拉</td>
               <td>李白</td>
               <td>貂蝉</td>
           </tr>
           <tr>
               <td>鲁班</td>
               <td>张良</td>
               <td>孙尚香</td>
           </tr>
           <tr>
               <td>李元芳</td>
               <td>后裔</td>
               <td>东皇太一</td>
           </tr>
       </table>
    </body>
</html>

表格标签的属性

表格标签的边框属性和表格大小属性:

<table width="宽" height="高" border="边框"></table>

表格标签的间距属性和边距属性:

<table cellspacing="单元格之间的距离" cellpadding="内容到边框的距离"></table>

表格标签背景图片属性：

<table background="背景图片的地址（图片路径）"></table>

设置表格水平对齐方式属性：

<table align="left(左) center(中) right(右)"></table>

合并以上属性的格式：

<html>
    <head></head>
    <body>
       <table border="1px" width="400px" height="400px" cellspacing="0" align="center" background="img\22.jpg">
           <tr>
               <td>英雄</td>
               <td>定位</td>
               <td>称号</td>
               <td>配音</td>
           </tr>
           <tr>
               <td>安其拉</td>
               <td>法师</td>
               <td>暗夜萝莉</td>
               <td>詹佳</td>
           </tr>
           <tr>
               <td>鲁班</td>
               <td>射手</td>
               <td>机关造物</td>
               <td>刘垚</td>
           </tr>
           <tr>
               <td>李元芳</td>
               <td>射手</td>
               <td>王都密探</td>
               <td>罗玉婷</td>
           </tr>
       </table>
    </body>
</html>

行标签属性

行标签的背景颜色属性:

<tr bgcolor="颜色"></tr>

行标签的水平对齐方式属性:

<tr align="left(左) center(中) right(右)"></tr>

行标签的垂直对齐方式属性:

<tr valign="top(上) middle(中) bottom(下)"></tr>

单元格标签的属性

单元格大小属性

<tr widht='宽' height="高"></tr>

背景颜色和背景图片属性：

<tr bgcolor="颜色" background="图片路径"></tr>

合并单元格属性

<td colspan="横向合并" rowspan="纵向合并"></td>

colspan=""和rowspan="",值是数字，合并几个单元格就写几个。注意：如果是横向合并，要把属性添加到最左边的<td>。如果是纵向合并，要把属性添加到最上边的<td>。