| HTML中Table表格的使用与漂亮的表格模板 | 您所在的位置：网站首页 › 会议内容表格格式怎么写好看一点 › HTML中Table表格的使用与漂亮的表格模板 |
HTML中Table表格的使用与漂亮的表格模板
|
1、表格标记
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。 标记说明表格标记标记表示整个表格。标记中有很多属性，例如 width 属性用来设置表格的宽度，border 属性用来设置表格的边框，align 属性用来设置表格的对其方式，bgcolor 属性用来设置表格的背景色等。标题标记标题标记以开头，以结束，标题标记也有一些属性，例如：align、valign 等。表格行标记一组标记表示表格中的一行。标记要嵌套在标记中使用，该标记也具有 algin、background 等属性。表头标记表头标记以开头，以结束，也可以通过 algin、background、colspan、valign 等属性来设置表头。单元格标记单元格标记又称为列标记，一个标记中可以嵌套若干个标记。该标记也具有 algin、background、valign 等属性。 1.1 显示表格边框方法一：在标记中添加属性：border="1" cellspacing="0"，如下： 说明： border="1"表示设置表格边框1px； cellspacing="0"表示设置表格边框间距为0，即无边距。 方法二：使用CSS样式。 table { border-collapse: collapse;} table,table tr th, table tr td { border:1px solid #000000; } 1.2 合并单元格colspan 是列合并，rowspan是行合并。 示例：在页面中定义学生成绩表，并在表格中显示边框，同时使用单元格合并。 表格标记 table { border-collapse: collapse;} table,table tr th, table tr td { border:1px solid #000000; } 学生考试成绩单 姓名 语文 数学 英语 张三 89 92 87 李四 93 86 80 王五 85 86 90 博客信息 您好，欢迎访问 pan_junbiao的博客 博客地址：https://blog.csdn.net/pan_junbiao执行结果：
2、漂亮的Table表格模板 以下是来自 hipenpal.com 网站提供的一些漂亮的Table表格模板。 更多模板可以访问 hipenpal.com 网站，请点击：漂亮的Table表格模板 模板1： .table11_7 table { width:100%; margin:15px 0; border:0; } .table11_7 th { background-color:#00A5FF; color:#FFFFFF } .table11_7,.table11_7 th,.table11_7 td { font-size:0.95em; text-align:center; padding:4px; border-collapse:collapse; } .table11_7 th,.table11_7 td { border: 1px solid #2087fe; border-width:1px 0 1px 0; border:2px inset #ffffff; } .table11_7 tr { border: 1px solid #ffffff; } .table11_7 tr:nth-child(odd){ background-color:#aae1fe; } .table11_7 tr:nth-child(even){ background-color:#ffffff; } SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE执行结果：
模板2： .table11_6 table { width:100%; margin:15px 0; border:0; } .table11_6 th { background-color:#96C7ED; color:#000000 } .table11_6,.table11_6 th,.table11_6 td { font-size:0.95em; text-align:center; padding:4px; border-collapse:collapse; } .table11_6 th,.table11_6 td { border: 1px solid #73b4e7; border-width:1px 0 1px 0; border:2px inset #ffffff; } .table11_6 tr { border: 1px solid #ffffff; } .table11_6 tr:nth-child(odd){ background-color:#dcecf9; } .table11_6 tr:nth-child(even){ background-color:#ffffff; } SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE 执行结果：
模板3： .table11_3 table { width:100%; margin:15px 0; border:0; } .table11_3 th { background-color:#FF5675; color:#FFFFFF } .table11_3,.table11_3 th,.table11_3 td { font-size:0.95em; text-align:center; padding:4px; border-collapse:collapse; } .table11_3 th,.table11_3 td { border: 1px solid #fe2047; border-width:1px 0 1px 0; border:2px inset #ffffff; } .table11_3 tr { border: 1px solid #ffffff; } .table11_3 tr:nth-child(odd){ background-color:#fec6d1; } .table11_3 tr:nth-child(even){ background-color:#ffffff; } SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE SAMPLESAMPLESAMPLE 执行结果：
|
【本文地址】
公司简介
联系我们