HTML表格相关

<table bgcolor="" backgorund="" border="" bordercolor="#0000FF" cellpadding="0"{表格右边(如果有表格之间的距离的话)边框与内容的距离} cellspacing="0"{表格与表格之间的距离(上下左右)} bordercolor="" align="" valign=""是整个表格的位置 不是设置表格里面的内容 width="" height="">
||->文字 ->的距离 cellpadding
<td width height bgcolor background align水平对齐 valign垂直对齐 rowspan行合并 colspan列合并 nowrap="nowrap"是否换行显示内容>
<tr width height bgcolor align{left center right} valign{top middle bottom}>
合并td列的公式:删除的个数=合并的个数-1

<caption valign top bottom middle>标题

<table width="600" border="1" bordercolor="black" cellspacing="0" cellpadding="0">
<colgroup span="2"></colgroup> //设置直列化格式 即让那一列什么样式 从1开始 span=2为跨过2列
<colgroup bgcolor="red"></colgroup><!--跨过2列后再设置colgroup即为第三列第三列数学列全红-->
<thead>//表头区
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>//表体区
<tr>
<td>张山</td>
<td>98</td>
<td>99</td>
<td>97</td>
</tr>
<tr>
<td>李四</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
<tr>
<td>王五</td>
<td>89</td>
<td>90</td>
<td>98</td>
</tr>
</tbody>
<tfoot>//表尾区
<tr>
<td>总分</td>
<td>345</td>
<td>789</td>
<td>789</td>
</tr>
</tfoot>
</table>

<!-- <table width="600" border="1" bordercolor="black" cellspacing="0" cellpadding="0" align="center" valign="middle" rules="rows"> -->

 1 <table width="600" border="1" bordercolor="black" cellspacing="0" cellpadding="0" align="center" valign="middle" >
 2 <colgroup span="2"></colgroup>
 3 <colgroup bgcolor="red"></colgroup><!--第三列数学列全红-->
 4 <caption align="center" valign="middle"><font size="20" color="red"><b>学习成绩表<sup>&reg;</b></font></caption>
 5 <thead>
 6 <tr >
 7 <th>姓名</th>
 8 <th>语文</th>
 9 <th>数学</th>
10 <th>英语</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr>
15 <td align="center">张山</td>
16 <td>98</td>
17 <td>99</td>
18 <td>97</td>
19 </tr>
20 <tr>
21 <td align="center">李四</td>
22 <td>89</td>
23 <td>90</td>
24 <td>98</td>
25 </tr>
26 <tr>
27 <td align="center">王五</td>
28 <td>89</td>
29 <td>90</td>
30 <td>98</td>
31 </tr>
32 <tr>
33 <td colspan="4" align="center">合并</td>
34
35 </tr>
36 <tr>
37 <td colspan="3" align="center">合并</td>
38 <td >合并</td>
39 </tr>
40 <tr>
41 <td rowspan="2">王五</td>
42
43 <td>89</td>
44 <td>90</td>
45 <td>98</td>
46 </tr>
47 <tr>
48 <td>89</td>
49 <td>90</td>
50 <td>98</td>
51 </tr>
52 <tr>
53 <td rowspan="3">王五</td>
54
55 <td rowspan="2">11</td>
56 <td>22</td>
57 <td>33</td>
58 </tr>
59 <tr>
60 <!-- <td>44</td> -->
61 <td rowspan="3">55</td>
62 <td>66</td>
63 </tr>
64 <tr>
65 <td>77</td>
66 <!-- <td>88</td> -->
67 <td>99</td>
68 </tr>
69 <tr>
70 <td>00</td>
71 <td>01</td>
72 <!-- <td>02</td> -->
73 <td>03</td>
74 </tr>
75 </tbody>
76 <tfoot>
77 <tr>
78 <td align="center">总分</td>
79 <td>345</td>
80 <td>789</td>
81 <td>789</td>
82 </tr>
83 </tfoot>
84 </table>

比如下次合并66为占3列 那么要删掉2个td 哪2个,相同位置的(都是第3列)99和03即可

时间: 2024-10-18 00:06:40

HTML表格相关的相关文章

[2016-01-14][html][表格相关的标记]

[2016-01-14][html][表格相关的标记] 表格内容 用来声明一个表格,在表格内容 使用 等标记来构造表格 属性信息: width:表格的宽度 可以是像素,也可以是父级元素的百分比% heigth:高度 border:表格外边框的宽度 align:表格显示的位置(在窗口的的位置) left,center,right cellspacing:单元格之间的间距 单位像素 cellpadding:单元格内容与单元格边框的距离 frame:作用:控制表格边框最外层的四条线框 void(默认值

表格相关属性

border-collapse: 值1 seperate (默认),值2 collapse:  单元格的边框显示方式 合并还是分开 border-spacing: 上面单元格分开时 单元格与单元格之间的间距: caption-side: top bottom left right; 设置表格标题的位置:和<caption>标签一起使用: empty-cells: show (默认) hide ; 当border-collapse 值为 seperate 时  ,设置无内容单元格是否显示: ta

.Net学习笔记----2015-07-13(表格相关属性介绍及HTML小练习)

<table> ·bgcolor:背景颜色    border:边框 bordercolor:边框颜色  cellspacing单元格与内容之间的间隔 width:   height: <td> align valign bgcolor width height colspan rowspan 1.分别使用<ol><ul>显示歌曲列表,<ol>用a,b,c格式显示,<ul>使用实心圆显示 a.爱 ·爱 b.青苹果乐园 ·青苹果乐园 c

HTML表格相关元素

<table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元.更复杂的 HTML 表格也可能包括 caption.col.colgroup.thead.tfoot 以及 tbody 元素. table标签除了具有html元素中通用的属性外,还含有自己的属性,常用属性如下: bgcolor:规定表格背景颜色. cellpadding:规定单元边沿与其内容之间的空

5.DOM访问表格元素

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function showTableInfo() { var table = document.getElementById("myt

HTML表格的一些标签、属性

表格的基本结构<table><tr><th><td> 跨行(合并行)属性(colspan).跨列(合并列)属性(rowspan) 表格相关修饰属性: border(指定表格的边框的宽度)比如<table border="1">  border=1 表示表格边框的粗细为1像素(默认值),为0表示没有边框. width(指定表格的宽度) height(指定表格的高度) bgcolor(背景颜色) background(背景图片)

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

2.1 表格基础

上一章已介绍了HTML基本标签,既介绍了如何使用HTML文件的基本结构创建网页,又介绍了文本相关标签实现文字修饰和布局,还讲解了图像相关标签如何实现图文并茂的页面,超链接相关标签如何实现页面间的跳转. 本章开始讲解表格的基础,其中重点是表格的基本结构,难点是如何创建跨多行跨多列的表格.为了使我们制作的页面更精致.表格更美观,我们还要研究表格布局,以及如何对表格进行美化修饰. 本节单词记忆:标签 1.table 2.tr 3.td 属性 1.border 网页学习网提示:html语言非常简单,不需

表格自适应截字

demo 我们应该都知道使用 word-break: break-all; 让连续的英文数字字符换行显示:以及 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 让单行文字超出的时候使用点点点表示(Chrome目前有属性可以让多行文字点点点,且点的位置是在中间,见下2行示例代码). display: -webkit-box; /* height: 36px; line-height: 18px; */ -webkit-