HTML5样式链接表格

发布时间：2020-02-27 06:39:22 阅读：382 作者：yeleven 栏目：移动开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

HTML样式

1.标签：

<link> 资源引用

2.属性：

rel = "stylesheet" 外部样式表

type = "text/css" 引用文档的类型

margin-left 边距

外部样式表：

        <link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表：

        <style>
            body{
                background-color:red;
            }
            p{
                margin-left:20px;
            }
        </style>

内联样式表：

        <p >

HTML链接

1.链接数据：

文本链接

                <a href="www.baidu.com">百度</a>

图片链接

                <a href="
                    <img src="1.jpg">
                 </a>

2.属性：

href属性：指向另一个文档的链接

name属性：创建文档内的链接

                <a name="tips">hello</a>
                <a href="#tips">跳转到hello</a> //在百度百科里面使用的非常多

3.img标签属性：

alt:替换文本属性（在图片不能正常显示时替换为文本"1.jpg_logo"）

                <img src="1.jpg" width="500px" height="500px" alt="1.jpg_logo">

HTML表格

<table> 定义表格

<caption> 定义表格标题

<th> 定义表格表头

<tr> 定义表格的行

<td> 定义表格的单元

<thead> 定义表格的页眉

<tbody> 定义表格的主体

<tfoot> 定义表格的页脚

<col> 定义表格的列属性

1.表格的表头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的表头</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
</body>
</html>

2.没有边框的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>没有边框的表格</title>
</head>
<body>
    <table>
        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
</body>
</html>

3.空单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空单元格</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

4.带有标题的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有标题的表格------加p元素</title>
</head>
<body>
<p>带标题的表格</p>
<table border="1">
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有标题的表格------加caption</title>
</head>
<body>
<table border="1">
    <caption>带标题的表格</caption>
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>
</body>
</html>

5.表格的内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的内标签</title>
</head>
<body>
<table border="1">
    <tr>
        <td>表格1</td>
        <td>表格2</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>苹果</li>
                <li>菠萝</li>
                <li>香蕉</li>
            </ul>
        </td>
        <td>
            好想吃啊
        </td>
    </tr>
</table>
</body>
</html>

6.单元格边距（cellpadding）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单元格边距</title>
</head>
<body>
<table border="1">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr><br/>
</table>
<table border="1" cellpadding="10">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr>
</table>
</body>
</html>

7.单元格间距（cellspacing）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单元格间距</title>
</head>
<body>
<table border="1">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr><br/>
</table>
<table border="1" cellspacing="10">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr>
</table>
</body>
</html>

8.表格内的背景颜色和图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的背景颜色</title>
</head>
<body>
<table border="1" bgcolor="aqua">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的背景图像</title>
</head>
<body>
<table border="1" background="1.jpg" cellpadding="100">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr>
</table>
</body>
</html>

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

HTML5样式 链接 表格

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签

HTML5样式链接表格