HTML表格的学习

最新推荐文章于 2023-06-18 23:26:07 发布

奋斗的小小ц

最新推荐文章于 2023-06-18 23:26:07 发布

阅读量105

点赞数

分类专栏： HTML 文章标签： HTML5学习表格单元格嵌入图片

本文链接：https://blog.csdn.net/qq_44812507/article/details/102487768

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML5表格的使用

单元格的背景颜色，对齐方式

表格图片及小表格的嵌入

<!DOCTYPE html>
<html lang="en">
<head>
    <title>表格&lt;table&gt;</title>
</head>
<body background=".//11.jpg">
    <h1>
        <p style="text-align: center">
            <span style="background-color: aqua" >&nbsp;表 格&nbsp;</span>
        </p>
    </h1>
    <h3>
        <span style="background-color: aqua">&lt;caption&gt;定义表格主题<br></span>
        <span style="background-color: aqua">&lt;thead&gt;定义表头<br></span>
        <span style="background-color: aqua">&lt;th&gt;定义表头单元格<br></span>
        <span style="background-color: aqua">&lt;tbody&gt;定义表格主题<br></span>
        <span style="background-color: aqua">&lt;tr&gt;定义表格行<br></span>
        <span style="background-color: aqua">&lt;td&gt;定义表格主体（每一个）单元格<br></span>
        <span style="background-color: aqua">&lt;tfloot&gt;定义表格脚注<br></span>
    </h3>
    <table border="1" cellpadding="16" cellspacing="8">
        <caption style="background-color: aqua">单元格间距cellpadding和边距cellspacing</caption>
        <thead>
            <tr>
                <td>表头A</td>
                <td>表头B</td>
                <td>表头C</td>
                <td>表头D</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>boder="1"表示显示表格边框，默认为0不显示</td>
                <td></td>
                <td>不填写内容则表示为空</td>
                <td>不添加cell padding则根据单元格内容自动调节</td>
            </tr>
        </tbody>
    </table>
    <br>
    <table border="1" cellpadding="25" cellspacing="0" style="font:bolder">
        <caption style="background-color: aqua">rowspan跨行colspan跨列</caption>
        <thead>
            <tr>
                    <td>表头A</td>
                    <td>表头B</td>
                    <td></td>
                    <td>表头D</td>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>row 1,col 1</td>
                <td></td>
                <td rowspan="2">跨两行</td>
                <td rowspan="3">
                    <table border="1" cellpadding="6" cellspacing="4">
                        <caption style="background-color: aqua">单元格颜色和对齐方式</caption>
                        <thead cellpadding="10">
                                <th align="left">表头A</th>
                                <th align="center">表头B</th>
                                <th align="right">表头C</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td bgcolor="azure">单元格的背景颜色</td>
                                <td bgcolor="azure"></td>
                                <td bgcolor="azure"><font color="red">单元格字体颜色</font></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">跨两列</td>
            </tr>
            <tr>
                <td>嵌入图片</td>
                <td colspan="2"><img src="C://Users//DELL//Pictures//Saved Pictures//12.jpg" 
                    width=220 height=180 alt="error">
                </td>
            </tr>            
        </tbody>

    </table>
</body>
</html>

建议使用谷歌浏览器哦

实现效果
在这里插入图片描述

奋斗的小小ц

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格的学习

HTML5表格的使用单元格的背景颜色，对齐方式表格图片及小表格的嵌入<!DOCTYPE html><html lang="en"><head> <title>表格&lt;table&gt;</title></head><body background=".//11.jpg">...
复制链接

扫一扫

专栏目录