网站首页 > 知识剖析正文

HTML-Table表格1 209

nixiaole 2024-11-25 15:43:14 知识剖析 18 ℃

table表格一种早期十分流行的网页布局方式,现在基本都是div+css的布局方式,表格一般由tr(行)td(列)标签组成

表格的常用属性:1)border:表示表格边框线2)cellpadding:单元格内容和内边框之间的距离3)cellspacing:表示单元格之间的间距4)bgcolor:背景颜色5)width:宽度6)height:高度等等

没有设置表格width与height属性,表格宽高暂时由单元格的内容的宽高决定,其他暂不考虑

想要消除单元格间距与内容与单元格内边框的间距设置属性cellspacing,cellpadding为"0"

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1px" cellspacing="0" cellpadding="10">
        <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
        </tr>
        <tr>
            <td>C#</td>
            <td>Asp.net</td>
            <td>MVC</td>
        </tr>
        <tr>
            <td>HTML</td>
            <td>JavaScript</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

tr常用属性

align:单元格内容的水平对齐方式,属性值:1)left2左侧)right右侧3)center中间

valign:单元格内容的垂直对齐方式,属性值1)top上边2)bottom下边3)middle中间

rowspan与colspan:将单元格进行行与行或者列与列的合并

这些属性以后都会写在css样式表中;制作显示一个对齐方式与行或列的合并的表格

<!DOCTYPE html>
<html>
<head>
    <title>表格</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="0" width="500" height="300">
        <tr>
            <td colspan="3" align="center">课程表</td><!--合并三行-->
        </tr>
        <tr align="center"><!--单元格内容居中显示-->
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
        </tr>
        <tr align="center">
            <td>HTML</td>
            <td rowspan="2">.NET</td><!--合并两列-->
            <td>JavaScript</td>
        </tr>
        <tr align="center">
            <td>CSS</td>
            <td>JQuery</td>
        </tr>
    </table>
</body>
</html>

表格中设置的属性虽然会继承,但是子标签单独设置了属性,就会覆盖父标签的属性;比如tr

设置align="center",此tr中的子标签td单独设置了align="left",最终效果是此td内容居左显示

上一篇：二、HTML列表、表格
下一篇： 57challenges-56个挑战-客户端设计(part3)

网站首页 > 知识剖析 正文

HTML-Table表格1 209

猜你喜欢

网站首页 > 知识剖析正文