HTML基础【2】—table总结

最近抽了点时间，整理一下一些前端基础知识，写的不好的地方请大家踊跃留言，我会继续优化这一系列文章：

table的常用属性:

• border="" 表格的边框宽度
  width="" 表格的宽度
  height="" 表格的高度
  cellspacing="" 单元格到周围的距离
  cellpadding="" 单元格内文字到单元格的举例
  align="left|right|center" 默认left 当前表格在页面中的对齐位置
  bgColor="red" 背景颜色
  borderColor="green" 表格的边框颜色

tr的常用属性

• align="left|right|center" 当前行文字横向对齐方式 默认:left
  valign="top|bottom|middle" 当前行文字纵向对齐方式 默认:middle
  bgColor="" 当前行颜色

td的常用属性:

• bgColor="" 当前单元格颜色
  align="left|right|center" 当前单元格文字横向对齐方式 默认:left
  valign="top|bottom|middle" 当前单元格文字纵向对齐方式 默认:middle
  width="" 当前单元格宽度 如果table有宽度 那么 只能是去挤其他单元格 让当前 达到最大宽度就可以了 不会撑大table宽度
  height="" 当前单元格高度 无论table有没有设置过高度 都会撑高当前table

细线表格的制作:

   table{
            /* 表格的边框合并  */
            border-collapse:collapse;
        }

表格标题:

 <table border="1" width="300" height="150" align="center" >
	<!-- 表格标题 跟着表格一起走 -->
    <caption>表格信息登记表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr align="center">
        <th>海柱</th>
        <td>38</td>
        <td>法师</td>
    </tr>
  	<tr align="center">
        <th>小白</th>
        <td>18</td>
        <td>都比</td>
    </tr>
</table> 

表格信息登记表

姓名	年龄	职业
亚瑟	38	战士
后羿	18	射手

表格语义化:
语义化标签：本身不具有任何效果 不会对原有的效果有任何影响，作用就是用来分层次与结构的
thead,tbody,tfoot

 <table border="1" width="400" height="150" align="center">
<thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
</thead>
<tbody>
        <tr>
            <td>海柱</td>
            <td>38</td>
            <td>法师</td>
        </tr>
        <tr>
            <td>小岳岳</td>
            <td>12</td>
            <td>喜剧人</td>
        </tr>
</tbody>
<tfoot>
    <tr>
        <td align="right" colspan="3">------摘自<<清华大学食堂>></td>
    </tr>
</tfoot>
</table>  

姓名	年龄	职业
安琪拉	38	法师
小鲁班	12	射手
------摘自<<王者农药>>

不规则表格:
合并行 变高 rowspan=""
合并列 变宽 colspan=""

  <table border="1" width="400" height="400" align="center">
            <tr align="center">
                <td colspan="2" bgColor="red">1</td>
                <td rowspan="2" bgColor="blue">2</td>
            </tr>
            <tr align="center">
                <td rowspan="2" bgColor="orange">4</td>
                <td bgColor="green">5</td>
            </tr>
            <tr align="center">
                <td colspan="2" bgcolor="hotpink">8</td>
            </tr>
    </table>  

1		2
4	5
	8