小白程序员的第二天

Table表格

一完整表格是由:表的标题 表头 表内容 表尾构成的

   完整表格的好处:可以更好的提高浏览器加载的效率

<table>

<caption>title</caption>//标题(默认居中)

 <thead>//表头(有默认加粗居中样式)

  <tr>//表示行

<td>//表示列

</td>

  </tr>

 </thead>

         <tbody>//身体

   <tr>

<td>body1</td>

   </tr>

  </tbody>

          <tfoot>//表尾

<tr>

<td>foot1</td>

</tr>

</tfoot>

</table>

当表格宽度不够内容的宽度是内容将撑起表格的宽度

如果表格的宽度足够显示内容时

这时表格的宽度局势你设置的宽度

 

二文字换行

超出div宽度连续的英文不会自动换行

系统认为空格中文是换行的标志

到达长度系统强制换行

 

三表格的合并(合并几那一行或几列就要删除对应的几行或几列)

合并行rowspan

和并列colspan

 

列子:

<table border="1px" style="text-align: center;">

<caption>练习课程表</caption>

<tr>

<td colspan="2">时间</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

</tr>

<tr>

<td rowspan="4">1</td>

<td>第一节课</td>

<td>1</td>

<td rowspan="3">大数据库应用开发</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第二节课</td>

<td></td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第三节课</td>

<td></td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第四节课</td>

<td></td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td rowspan="4">1</td>

<td>第五节课</td>

<td rowspan="2">大课</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第六节课</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第七节课</td>

<td></td>

<td>4</td>

<td colspan="3">自习</td>

</tr>

<tr>

<td>第八节课</td>

<td></td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

</table>

效果图:

 

 

四表格的样式;

cellpadding="0" 单元格的内边距

cellspacing="0" 单元格之间的距离

rules 显示 内边框的分割线

rows  显示行

cols  显示列

all   都显示

 

今天的中点是表格合并的运用,理解表格的合并在加以熟练就可以了

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

       </tr>

<tr>

<td rowspan="4">1</td>

<td>第一节课</td>

<td>1</td>

<td rowspan="3">大数据库应用开发</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第二节课</td>

<td></td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第三节课</td>

<td></td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第四节课</td>

<td></td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td rowspan="4">1</td>

<td>第五节课</td>

<td rowspan="2">大课</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第六节课</td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

<tr>

<td>第七节课</td>

<td></td>

<td>4</td>

<td colspan="3">自习</td>

</tr>

<tr>

<td>第八节课</td>

<td></td>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

</table>

效果图:

 

 

四表格的样式;

cellpadding="0" 单元格的内边距

cellspacing="0" 单元格之间的距离

rules 显示 内边框的分割线

rows  显示行

cols  显示列

all   都显示

 

今天的中点是表格合并的运用,理解表格的合并在加以熟练就可以了

猜你喜欢

转载自blog.csdn.net/weixin_40873693/article/details/78417507
今日推荐