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包括的所有内容居中。

相关文章
|
26天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
48 12
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
1月前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
|
2月前
|
XML 数据格式
HTML 实例解析
本文介绍了HTML中常见元素的使用方法,包括`&lt;p&gt;`、`&lt;body&gt;`和`&lt;html&gt;`等。详细解析了这些元素的结构和作用,并强调了正确使用结束标签的重要性。此外,还提到了空元素的使用及大小写标签的规范。
|
5月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
191 0
|
2月前
HTML表格
HTML表格
43 4
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
66 19
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
42 1