web表格

web表格

一、基础标签作用

\1. table：表格根容器，承载所有表格元素

\2. tr：代表表格一行

\3. td：普通单元格，存放数据

\4. th：表头单元格，文字默认加粗居中，用于列标题

\5. caption：表格标题，放在表格上方

二、结构化分区标签

\1. thead：表头区域，存放表头行，分页打印时每页都会重复显示表头

\2. tbody：表格主体数据区域，表格内容默认都存放在这里

\3. tfoot：表尾区域，放置汇总、备注行，渲染会自动显示在表格底部

三、单元格合并

\1. 跨列合并 colspan：横向合并多个单元格

\2. 跨行合并 rowspan：纵向合并多个单元格
合并单元格后，多余单元格标签需要删除，避免行列错位

四、表格常用属性

\1. border：设置表格边框粗细

\2. width/height：定义表格或单元格宽高

\3. align：设置单元格内文字水平对齐方式

\4. valign：设置单元格文字垂直对齐方式

\5. cellpadding：单元格内文字与边框的内边距

\6. cellspacing：单元格与单元格之间的间距

\7. border-collapse：CSS属性，合并相邻边框，消除间隙

五、CSS样式相关知识点

\1. 边框合并：消除单元格之间双层边框，页面更整洁

\2. 奇偶行变色：隔行换色，提升长表格可读性

\3. 固定列宽：防止内容挤压变形，统一表格尺寸

\4. 文字溢出处理：超长文字隐藏、换行或省略显示

\5. 鼠标悬浮高亮：鼠标移入行时改变背景色，方便阅读

六、表格布局两种模式

\1. 自动布局：根据单元格内容自动分配宽度，内容多的格子更宽

\2. 固定布局：表格宽度固定，所有列平均分配宽度，不受内容影响