CSS - 表格标签属性和样式属性

Dear 丶 2023-10-03 10:42 25阅读 0赞

# table标签属性 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70][]

# table样式属性以及相较于标签属性的区别与联系 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 1][]

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:54pt;">标签</td> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:116pt;">标签属性</td> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:77pt;">属性值(例)</td> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:104pt;">标签功能</td> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:198pt;">（可替换的）样式属性</td> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:80pt;">样式属性值(例)</td> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:108pt;">样式效果</td> 
 <td style="background-color:#c6e0b4;border-color:#000000;text-align:center;vertical-align:bottom;width:286pt;">对比</td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;text-align:center;vertical-align:middle;">table</td> 
 <td style="border-color:#000000;vertical-align:bottom;">align</td> 
 <td style="border-color:#000000;vertical-align:bottom;">center</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:104pt;">表格居中</td> 
 <td style="border-color:#000000;vertical-align:bottom;">margin</td> 
 <td style="border-color:#000000;vertical-align:bottom;">0 auto</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:108pt;">表格剧中</td> 
 <td style="border-color:#000000;vertical-align:bottom;">效果一致</td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:bottom;">bgcolor</td> 
 <td style="border-color:#000000;vertical-align:bottom;">#eee</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:104pt;">表格背景色</td> 
 <td style="border-color:#000000;vertical-align:bottom;">background-color</td> 
 <td style="border-color:#000000;vertical-align:bottom;">#eee</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:108pt;">表格背景色</td> 
 <td style="border-color:#000000;vertical-align:bottom;">效果一致</td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:bottom;">border</td> 
 <td style="border-color:#000000;vertical-align:bottom;">1</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:104pt;">同时设置表格和单元格边框线</td> 
 <td style="border-color:#000000;vertical-align:bottom;">border</td> 
 <td style="border-color:#000000;vertical-align:bottom;">1px solid #000&nbsp;&nbsp;</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:108pt;">仅设置表格边框线</td> 
 <td style="border-color:#000000;vertical-align:bottom;">标签属性border功能更强大一点，但是推荐使用样式属性border，因为更好控制。</td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:bottom;">cellpadding</td> 
 <td style="border-color:#000000;vertical-align:bottom;">10</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:104pt;">单元格边框线与单元格内容的间距</td> 
 <td style="border-color:#000000;vertical-align:bottom;">padding</td> 
 <td style="border-color:#000000;vertical-align:bottom;">10px</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:108pt;">单元格边框线与单元格内容的间距</td> 
 <td style="border-color:#000000;vertical-align:bottom;">效果一致</td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:bottom;">cellspacing</td> 
 <td style="border-color:#000000;vertical-align:bottom;">0</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:104pt;">单元格边框线与表格/单元格边框线的间距</td> 
 <td style="border-color:#000000;vertical-align:bottom;">border-collapse</td> 
 <td style="border-color:#000000;vertical-align:bottom;">collspace</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:108pt;">单元格边框线与表格/单元格边框线的间距</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:286pt;">cellsapcing=“0”是让表格/单元格和单元格之间的边框线间距为0，即重合，最终效果是假加粗。 Border-collapse=collspace是让表格/单元格和单元格共用边框线，效果没有加粗</td> 
 </tr> 
 <tr> 
 <td style="border-color:#000000;vertical-align:bottom;">width</td> 
 <td style="border-color:#000000;vertical-align:bottom;">200</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:104pt;">表格宽度</td> 
 <td style="border-color:#000000;vertical-align:bottom;">width</td> 
 <td style="border-color:#000000;vertical-align:bottom;">200px</td> 
 <td style="border-color:#000000;vertical-align:bottom;width:108pt;">表格宽度</td> 
 <td style="border-color:#000000;vertical-align:bottom;">效果一致</td> 
 </tr> 
 </tbody> 
</table>

# td标签属性 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 2][]

# td样式属性以及相较于标签属性的区别与联系 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 3][]

text-align 属性规定元素中的文本的水平对齐方式。

> 该属性通过指定行框与哪个点对齐，从而设置**块级元素内文本**的水平对齐方式。
> 
> 通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

vertical-align 属性设置元素的垂直对齐方式。

> 该属性定义**行内元素**的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。
> 
> 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202107121113089.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210712111612387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210712114709687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210712115414226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70