深圳网站建设之html表格制作教程
深圳网站建设之html表格制作教程1.相关标签画图说明，table是一个表格的模块，里面有行，光有行不行，里面要有列，在html中不叫列，叫单元格，再有很多行，就组成了表格-------》table标签包含行tr---》再包含单元格td表格：<table></table>行：<tr></tr>单元格：<td></td>每列的标题：<th></th>表格标题：<caption></caption>小案例：
案例代码如下：<!-- 金黑网络 表格的区域,border属性代表边框的意思 -->
<table border="1">
<!-- 行 -->
<tr>
<!-- 单元格 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<!-- 单元格 -->
<td>令狐冲</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<!-- 单元格 -->
<td>任盈盈</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<!-- 单元格 -->
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
<tr>
<!-- 单元格 -->
<td>岳不群</td>
<td>男</td>
<td>50</td>
</tr>
</table>表格的边框语法
<table border=1>
</table>注意：border这个属性一定加在table标签上，加在td上不生效2.对齐方式a) 水平对齐语法：align="center/left/right"
b) 垂直对齐语法：valign="top/middle/bottom"
3.单元格间距和填充单元格间距（cellspacing）：单元格和单元格距离，默认是2像素单元格填充（cellpadding）：单元格和内容的距离，默认是1像素
4.合并单元格
图示：
导入：最后两行的最后两个单元格为照片，需要合并起来，这种合并是上下合并，所以合并的是行。如果是左右合并，那就是合并的列合并行(rowspan)：把不同的行合并起来，写在上面的单元格上面合并列(colspan)：把不同列合并起来，写在左边的单元格上面取值是数值，需要合并几个单元格就写数字几就行，一旦合并了单元格，就需要将多余的单元格删掉代码<table cellspacing="0" cellpading="30" border="1" width="300" height="200">
<caption><h3>学生证</h3></caption>
<tr>
<th align="center" colspan="4">深圳传值黑马程序员</th>
</tr>
<tr align="center">
<td>姓名</td>
<td>班级</td>
<td>学号</td>
<td rowspan="2">照片</td>
</tr>
<tr align="center">
<td>曾真光</td>
<td>php14期</td>
<td>007</td>
</tr>
</table>
注意：合并以后一定要把多余的单元格td删掉。
页:
[1]