表格怎么制作？table标签的基本结构是什么？

<table>

<tr>

<th>

<td>

<table>

<thead>

<tbody>

<tfoot>

<thead>

<tbody>

<tfoot>

<tr>

<tr>

<th>

<td>

<tr>

<th>

<td>

<table>   <thead>     <tr>       <th>姓名       <th>年龄           <tbody>     <tr>       <td>张三       <td>25          <tr>       <td>李四       <td>30         

你看，结构是不是挺清晰的？先是

<table>

包起来，然后

<thead>

里一行

<th>

做表头，接着

<tbody>

里两行

<td>

做数据。

我的表格怎么那么丑？CSS如何美化表格？

嗯，光用HTML标签搭出来的表格，那真是“清水出芙蓉，天然去雕饰”——说白了就是丑。它可能连边框都没有，文字也挤在一起。美化表格，那绝对是CSS的活儿。以前我们可能会在

<table>

标签里写

border="1"

、

width="100%"

这些属性，但现在，基本都用CSS了，也更灵活。

要让表格好看点，你可以从几个方面入手：

• 边框合并： 默认情况下，表格的单元格边框是分开的，看起来有点双层边框的感觉。用

  border-collapse: collapse;

  可以把相邻单元格的边框合并成一个，这样表格看起来会更整洁。

• 内边距：

  padding

  属性给单元格内容和边框之间留点空隙，文字就不会那么憋屈了。比如

  td, th { padding: 8px; }

  。

• 文字对齐：

  text-align

  可以控制文字在单元格里的水平对齐方式，比如

  left

  、

  center

  、

  right

  。

• 背景色： 给

  <thead>

  、

  <tbody>

  或者

  <tr>

  设置不同的

  background-color

  ，可以让表格更有层次感，比如隔行变色，或者表头和数据区颜色不同。

• 宽度控制： 用

  width

  属性来控制表格或列的宽度，让表格在页面上占据合适的位置。

• 鼠标悬停效果： 给

  <tr>

  添加

  :hover

  伪类，当鼠标移上去时改变背景色，能提升用户体验。

一个简单的CSS美化例子：

table {   width: 100%;   border-collapse: collapse; /* 合并边框 */ }  th, td {   border: 1px solid #ddd; /* 单元格边框 */   padding: 8px;   text-align: left; /* 左对齐 */ }  th {   background-color: #f2f2f2; /* 表头背景色 */   color: #333; }  tr:nth-child(even) { /* 隔行变色 */   background-color: #f9f9f9; }  tr:hover { /* 鼠标悬停效果 */   background-color: #ddd; }

把这段CSS加到你的网页里，表格立马就能焕然一新。

表格里数据太多了怎么办？

colspan

和

rowspan

是什么意思？

有时候表格结构会比较复杂，比如某个标题要跨越好几列，或者某项数据要占据好几行。这时候，

colspan

和

rowspan

这两个属性就派上用场了。它们允许你合并单元格，让表格布局更灵活。

• colspan

  (Column Span)： 这个属性是用来合并列的。如果你想让一个单元格横向占据多列的空间，就在

  <th>

  或

  <td>

  标签里加上

  colspan="N"

  ，这里的

  N

  是你希望它跨越的列数。 比如说，一个单元格要占据两列的位置，你就可以写

  colspan="2"

  。用了

  colspan

  的那个单元格，它后面对应的列就要少写一个，不然表格结构就乱了。

  <table>   <tr>     个人信息       <tr>     <td>姓名     <td>张三