WEB基础之：创建表格

创建表格

1. 表格的基本结构

1) 表格的基本结构
    <table>
        <tr>
            <td>表格第一行第一个单元格</td>
            <td>表格第一行第二个单元格</td>
        </tr>
        <tr>
            <td>表格中第二行第一个单元格</td>
            <td>表格中第二行第二个单元格</td>
        </tr>
    </table>

2) caption设置表格的标题
	<table>
		<caption>表格的标题</caption>
	</table>

3) th
    <tr>
        <th>表格的表头</th>
    <!--        表头一般位于第一行，用来表明这一行的内容类别; 方法与td相同，但表头的内容是加粗显示的。-->
    </tr>

2. 表格基本属性

1) width，height表格宽度与高度
	<table width="30%">
	<!--    表格的宽度/高度的值可以为具体的像素数或为浏览器的百分比数-->

2) align表格对齐
	<table align="center">

3) border表格边框宽度
	<table border="1">

4) bordercolor表格边框颜色
	<table bordercolor="#0099ff">

5) cellspacing表格内框宽度
	<table cellspacing="3">

6) cellpadding表格内文字与边框间距
	<table cellpadding="10">
	<!--    cellpadding文字与边框的距离以像素为单位，不仅对左右距离有效，同时也设置了上下边框与文字的间隔。-->

7) bgcolor表格背景颜色
	<table bgcolor="#ffe4c4">

8) background表格背景图像
	<table background="images/1.jpg">

3. 表格的行属性

1) height行高度
    <tr height="100">

2) bordercolor边框颜色
    <tr bordercolor="#ff0000">

3) bgcolor，background行背景
    <tr bgcolor="#adff2f">
    <tr background="images/1.jpg">

4) align行文字的水平对齐方式
    <tr align="right" valign="top">

5) valign行文字的垂直对齐方式
    <tr valign="top">

6)  表格标题的垂直对齐方式
    <caption align="bottom">表格标题</caption>

4. 单元格属性

1) width，height单元格大小
	<th width="60" height="50">单元格</th>

2) colspan水平跨度
    <th colspan="2">单元格</th>
    <!--        水平跨度相当于列合并，参数为列的个数；-->

3) rowspan垂直跨度
    <th rowspan="3">单元格</th>
    <!--        水平跨度相当于行合并，参数为行的个数；-->

4) align，valign对齐方式
    <th align="left">单元格</th>
    <!--        align水平对齐，valign垂直对齐-->

5) bgcolor，background背景
    <th bgcolor="red">单元格</th>
    <td background背景="images/1.jpg">单元格</td>

6) bordercolor边框颜色
    <th bordercolor="#ffffff">单元格</th>

7) bordercolorlight亮边框
    <th bordercolorlight="#adff2f">单元格</th>

8) bordercolordark暗边框
    <td bordercolordark="#0066ff">单元格</td>

5. 表格的结构

1) thead表首
	<!--    在一个表元素中只能有一个<thread>标记，<thread>标记内可以包含<td>, <th>, <tr>-->
    <thead bgcolor="#ffe4c4" align="center" valign="middle">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    </thead>
2) tbody表主体
	<!--    在一个表元素中只能有一个<tbody>标记，<tbody>标记内可以包含<td>, <th>, <tr>-->
    <tbody bgcolor="#ffabcd" align="center" valign="middle">
        <tr>
            <td>表内容1</td>
            <td>表内容2</td>
        </tr>
    </tbody>

3) tfoot表尾
	<!--    在一个表元素中只能有一个<tfoot>标记，<tfoot>标记内可以包含<td>, <th>, <tr>-->
    <tfoot bgcolor="#aaaaaa" align="right" valign="middle">
    <tr>
        <td colspan="2">创建日期</td>
    </tr>
    </tfoot>
posted @ 2022-08-17 10:53  f_carey  阅读(108)  评论(0)  编辑  收藏  举报  来源