HTML表格

目录

• 表格布局
•     一.表格的基本改造
  • 二.表格的较高的改造
  • 三.表格的高级改造
• 总结

表格布局

       <table>

       <tr>

           <td>内容</td>

       </tr>

</table>

属性	描述
thead	表头
tr	行
td	列

表格的多样化

一、表格的基本改造

（1）表格的边框

border------table的标签  

>=0的正整数 默认值是0

代码：<table border=“数值”>

<tr>

<td>内容<td>

<tr><table>

（2）表格的宽和高

属性	意义
width	表格的宽度
height	表格的高度

二.表格的较高的改造

（1）表格对齐的方式

align	意义
center	居中
right	靠右
left	靠左

代码：

<table align= “属性”>

<tr>

<td>内容<td>

<tr><table>

(2）表格的背景

bgcolor------背景颜色 background-------背景图

<table bgcolor="颜色‘’ background=“”>

<tr>

<td>内容<td>

<tr><table>

(三）表格的间距和边距

间距：单元格和单元格之间的距离 cellspacing 单位像素

边距：单元格内元素距离单元格的距离 cellpading 单位像素

补充： 如果table和tr同时设置不同高度，tr的优先级高

如果tr和td同时设置了不同的高度，哪个高取哪个（哪个值大取哪个）

三.表格的高级改造

（一）表格的嵌套

代码:

 (二）表格的合并

rowspan --------- 列 -------垂直方向跨行

代码：

<table align= “属性”>

<tr>

<td  rowspan="'>内容<td>

<tr><table>

colspan ---------- 行 --------------水平方向跨列

代码：

<table align= “属性”>

<tr>

<td  colspan="'>内容<td>

<tr><table>

---