开发者社区> twilight0402> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML_表格实例

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53968785 1.
+关注继续查看
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/53968785

1. 基本表格

基本表格

<!--基本表格-->
                <table border='2' width='600' cellpadding='5' cellspacing='0'>
                    <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

2. 无边框表格

只需去掉1中的border即可

无边框表格

3. 双线表格

将1中的cellspacing设为非0即可。
双线表格

4. 合并多列表格

td属性:
width: 单元格宽度
height: 单元格高度
bgcolor: 背景颜色
background: 背景图片
align: 单元格的水平对齐方式
valign: 单元格的垂直对齐方式(top/middle/bottom/baseline)
rowspan: 行合并数目
colspan: 列合并数目(特定长度的单元格,不会删除后面的单元格)

tr属性:
align right/left/center/justify/char 定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)/#xxxxxx/colorname 规定表格行的背景颜色。
char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign top/middle/bottom/baseline 规定表格行中内容的垂直对齐方式。


用colspan产生3个长度的单元格,再用align将单元格内的文字居中即可

列合并

<!--列合并-->
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td colspan='3' align='middle'>1.1</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

5. 合并多行表格

行合并

                <li>行合并表格</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td rowspan='3' align='middle' valign='middle'>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

6. 复杂表格1

混合使用行和列的合并

复杂表格1


                <li>复杂表格1</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td>1.1</td>
                        <td colspan='2' align='middle'>1.2+1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td rowspan='2' align='middle'>2.2+3.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.3</td>
                    </tr>
                </table>

7. 复杂表格2

复杂表格2

                <li>复杂表格2</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td colspan='2' align='middle'>2.1+2.2</td>
                        <td rowspan='2' valign='middle' align='middle'>2.3+3.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                    </tr>
                </table>

8. 凸起效果表格

table属性:
bordercolorlight: 边框亮部分的颜色(边框border大于1才有用)(单元格的右下,整个表格的左上)
bordercolordark:边框暗的部分(单元格的左上,整个表格的右下)

凸起效果

<!--凸起效果-->
                <table border='2' width='600' cellpadding='5' cellspacing='2' bordercolorlight='black' bordercolordark='white' bgcolor='gray'>
                <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

9. 凹陷效果表格

将8中的颜色逆置
凹陷效果

10. 细线表格

1.表格自身的border=0
2.给表格设置背景颜色(细线的颜色)
3.给表格设置单元格之间的距离(线条的粗细)

细线表格

<!--细线表格-->
                <table  width='600' cellpadding='0' cellspacing='1' bgcolor='black'>
                    <tr bgcolor='white'>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr bgcolor='white'>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr bgcolor='white'>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

th标题栏(文字加粗_自动居中)
<center>将center包括的所有内容居中。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML之图像,表格,列表,区块(笔记小结)
HTML之图像,表格,列表,区块(笔记小结)
0 0
python脚本,从mongo取数据发送html格式表格邮件
python脚本,从mongo取数据发送html格式表格邮件
0 0
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
table标签经典案例,综合使用行合并与列合并实现html网页表格【2020网页综合笔记03】
0 0
html关于表格table的相关知识分享【2020网页综合笔记02】
html关于表格table的相关知识分享【2020网页综合笔记02】
0 0
HTML基础教程7——表格标签和语义化标签
表格用<table>标签实现,内部主要有<tr>和<td>标签,其中表示行,表示列,属性border的值表示表格边框线的粗细,属性cellspacing的值表示内框和外框之间的距离,属性cellpadding的值表示内框的大小。
0 0
零基础HTML入门教程(14)——表格
我们生活处处离不开表格,我们比如说,成绩单,菜单,等。都是用表格做出来的,表格在我们生活中是必不可少的,生活处处离不开表格,所以我们这一小结学习一下表格的使用。在HTML定义表格的时候,有以下标签供我们使用NO表格标签用处1table定义表格,生成的表格在一对table/table中;2caption定义表格标题,当表格需要标题时,使用caption表格标题caption3thead定义表格的页眉4tbody定义表格的主体5tfoot定义表格的页脚6th定义表格的表头,一般是表头中的内容会被加黑;7tr定义
0 0
HTML表格合并行和列
1.合并行:rowspan 在设计表格时,有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格(类似Word的表格合并),这个时候就需要用到“合并行”或“合并列” 在HTML中,我们可以使用rowspan属性来合并行。所谓的合并行,指的是将“纵向的N个单元格”合并 实例:
0 0
HTML列表、表格和媒体元素
HTML列表、表格和媒体元素
0 0
HTML5表格简单应用案例之[招聘需求表]
HTML5表格简单应用案例之[招聘需求表]
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载