css属性

﹏ヽ暗。殇╰゛Y 2022-05-08 13:33 260阅读 0赞

# [关于table相关的属性，CSS样式][table_CSS] #

table属性：

1：border没有设置的话表格没有边框（none）

table\{border:1px solid \#F00\}

2：cellpadding单元格和内容的空白

3：cellspacing单元格和单元格之间的空白

4：frame规定外边框可见性

5：rules规定内边框可见性

6：规定内边框可见性

# HTML <th> 标签(<tr> 类似) #

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_abbr.asp" rel="nofollow">abbr</a></td> 
   <td><em>text</em></td> 
   <td>规定单元格中内容的缩写版本。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_align.asp" rel="nofollow">align</a></td> 
   <td> 
    <ul> 
     <li>left</li> 
     <li>right</li> 
     <li>center</li> 
     <li>justify</li> 
     <li>char</li> 
    </ul></td> 
   <td>规定单元格内容的水平对齐方式。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_axis.asp" rel="nofollow">axis</a></td> 
   <td><em>category_name</em></td> 
   <td>对单元格进行分类。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_bgcolor.asp" rel="nofollow">bgcolor</a></td> 
   <td> 
    <ul> 
     <li><em>rgb(x,x,x)</em></li> 
     <li><em>#xxxxxx</em></li> 
     <li><em>colorname</em></li> 
    </ul></td> 
   <td> <p>不推荐使用。请使用样式替代它。</p> <p>规定表格单元格的背景颜色。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_char.asp" rel="nofollow">char</a></td> 
   <td><em>character</em></td> 
   <td>规定根据哪个字符来进行内容的对齐。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_charoff.asp" rel="nofollow">charoff</a></td> 
   <td><em>number</em></td> 
   <td>规定对齐字符的偏移量。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_colspan.asp" rel="nofollow">colspan</a></td> 
   <td><em>number</em></td> 
   <td>设置单元格可横跨的列数。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_headers.asp" rel="nofollow">headers</a></td> 
   <td><em>idrefs</em></td> 
   <td>由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_height.asp" rel="nofollow">height</a></td> 
   <td> 
    <ul> 
     <li><em>pixels</em></li> 
     <li><em>%</em></li> 
    </ul></td> 
   <td> <p>不推荐使用。请使用样式替代它。</p> <p>规定表格单元格的高度。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_nowrap.asp" rel="nofollow">nowrap</a></td> 
   <td>nowrap</td> 
   <td> <p>不推荐使用。请使用样式取而代之。</p> <p>规定单元格中的内容是否折行。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_rowspan.asp" rel="nofollow">rowspan</a></td> 
   <td><em>number</em></td> 
   <td>规定单元格可横跨的行数。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_scope.asp" rel="nofollow">scope</a></td> 
   <td> 
    <ul> 
     <li>col</li> 
     <li>colgroup</li> 
     <li>row</li> 
     <li>rowgroup</li> 
    </ul></td> 
   <td>定义将表头数据与单元数据相关联的方法。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_valign.asp" rel="nofollow">valign</a></td> 
   <td> 
    <ul> 
     <li>top</li> 
     <li>middle</li> 
     <li>bottom</li> 
     <li>baseline</li> 
    </ul></td> 
   <td>规定单元格内容的垂直排列方式。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/tags/att_th_width.asp" rel="nofollow">width</a></td> 
   <td> 
    <ul> 
     <li><em>pixels</em></li> 
     <li><em>%</em></li> 
    </ul></td> 
   <td> <p>不推荐使用。请使用样式取而代之。</p> <p>规定表格单元格的宽度。</p> </td> 
  </tr> 
 </tbody> 
</table>

tableCSS样式：

## 表格 Table ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>版本</th> 
   <th>继承性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="http://css.doyoe.com/properties/table/table-layout.htm" rel="nofollow">table-layout</a></td> 
   <td>CSS2</td> 
   <td>无</td> 
   <td>设置或检索表格的布局算法</td> 
  </tr> 
  <tr> 
   <td><a href="http://css.doyoe.com/properties/table/border-collapse.htm" rel="nofollow">border-collapse</a></td> 
   <td>CSS2</td> 
   <td>有</td> 
   <td>设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开</td> 
  </tr> 
  <tr> 
   <td><a href="http://css.doyoe.com/properties/table/border-spacing.htm" rel="nofollow">border-spacing</a></td> 
   <td>CSS2</td> 
   <td>有</td> 
   <td>设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距（类似属性的cellspacing）</td> 
  </tr> 
  <tr> 
   <td><a href="http://css.doyoe.com/properties/table/caption-side.htm" rel="nofollow">caption-side</a></td> 
   <td>CSS2</td> 
   <td>有</td> 
   <td>设置或检索表格的caption对象是在表格的那一边</td> 
  </tr> 
  <tr> 
   <td><a href="http://css.doyoe.com/properties/table/empty-cells.htm" rel="nofollow">empty-cells</a></td> 
   <td>CSS2</td> 
   <td>有</td> 
   <td>设置或检索当表格的单元格无内容时，是否显示该单元格的边框</td> 
  </tr> 
 </tbody> 
</table>

[cellpadding][]

table的align属性：

align 属性规定表格相对于周围元素的对齐方式。（值为left，right，center）

通常来说，HTML 表格的前后都会出现折行。通过运用 align 属性，可实现其他 HTML 元素围绕表格的效果（表格在左、右或居中的效果）。

[table_CSS]: https://www.cnblogs.com/cndotabestdota/p/7237993.html
[cellpadding]: http://www.w3school.com.cn/tags/att_table_cellpadding.asp