html table


概念
Month Savings
January $100
包含元素:tr 行td 列
th 表头
caption 定义表格标题

---------->>>>>col colground thead tbody tfoot 浏览器支持较差,一般不用
常用属性:
1)html属性
border 定义表格整体边框
cellpadding 规定单元边缘和内容之间的距离(类似盒模型中的padding)
cellspacing 规定单元格之间的间隙 (类似margin)
2)css属性,详见:http://www.w3school.com.cn/cssref/index.asp#table


表格中有两种类型的单元格:
  • 表头单元 - 包含头部信息(由 th 元素创建)
  • 标准单元 - 包含数据(由 td 元素创建)
th和td的用法基本相同,下面只说td

td 中的常用属性:
规定单元格内容的水平对齐方式 align=left/right/center/justify/char
规定单元格内容的垂直对齐方式 valign=top/middle/bottom/baseline
合并单元格 合并列数  colspan
合并单元格 合并行数 rowspan
实战:table边框有很多bug,最稳妥的方法就是用css样式,对每一个单元格做样式设计

1)在table中使用border-radius

2)table中设置边框   http://www.divcss5.com/wenji/w503.shtml

做一张下图的表格

代码:

DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1,mimimum=1,user-scalable=0">
    <title>Documenttitle>    
    <style type="text/css">
    /*方法三:对每一个单元格单独设置css属性*/
    /*方法二:*/
/*        table{
            border-collapse:collapse;
            
        }
        th,td{
            border:2px solid blue;
        }*/
    style>
head>
<body >
    
    <table style="width:60%;height:400px;text-align:center;background:blue" border=0 cellspacing=2 cellpadding=0>
        <tr>
            <th rowspan=5 style="background-color:rgb(251,175,0);">学生th>
            <th colspan=6 style="background-color:rgb(0,255,255)">学生信息表th>
        tr>
        <tr style="background-color:rgb(249,117,109)">
            <td>序号td>
            <td>姓名td>
            <td>性别td>
            <td>年龄td>
            <td>电话td>
            <td>住址td>
        tr>
        <tr style="background-color:rgb(193,193,193)">
            <td>1td>
            <td>张三td>
            <td>td>
            <td>23td>
            <td>110td>
            <td>雁塔td>
        tr>
        <tr style="background-color:rgb(193,193,193)">
            <td>1td>
            <td>张三td>
            <td>td>
            <td>23td>
            <td>110td>
            <td>雁塔td>
        tr>
        <tr style="background-color:rgb(193,193,193)">
            <td>1td>
            <td>张三td>
            <td>td>
            <td>23td>
            <td>110td>
            <td>雁塔td>
        tr>
    table>
body>
html>