在现在 div 大行其道的时代,table 这个标签似乎很少被人提及,到处都是 div+css 布局的书以及博客文章,但其实 table 以及连带的其他表格标签依然在网页中占很重要的地位,特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。平时也经常接触到表格,现在总结一下表格的一些属性和样式,以及学习构思一些表格的样式,以便以后不时之需。

一、标签

<table> 定义 HTML 表格
<thead> 标签定义表格的表头
<tbody> 标签表格主体(正文)
<tfoot> 标签定义表格的页脚(脚注或表注)
<tr> 元素定义表格行
<th> 元素定义表头
<td> 元素定义表格单元
<caption> 元素定义表格标题,必须紧随 table 标签之后。只能对每个表格定义一个标题,默认居中与表格之上
<col> 标签为表格中一个或多个列定义属性值。
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。
 
二、表格标签及标签属性
(1)<table>
<table>    标签属性说实话个人觉得挺好用的,比如 align,width等,但是本着表现层与结构层的分离,现在w3c上已经不赞成使用了。
align:相当于浮动,用 css 的 float 代替
bgcolor:用 css 的background-color 代替
border:table 的 border 属性是继承到内部的 td 标签的,相当于同时对 (selector):table 和 (selector) table td 设置 css 的 border 属性,但是当你设置大于1的 border 数值时,又只有 table 的 border 宽度会改变。默认的浏览器属性包括:border-collapse: separate;border-spacing: 2px; 故默认添加后是双边border
cellpadding:规定单元边沿与其内容之间的空白,其实是设置表哥内部 td 标签的 padding 属性,用 (selector) table td 设置 css 的 padding 属性代替。
cellspacing:规定单元格之间的空间,用 (selector):table 设置 css 的 padding 属性代替。
frame:规定外侧边框的哪个部分是可见的,即设置表格 border,基本不会用这个属性。
rules:规定内侧边框的哪个部分是可见的,同 frame,几乎不会用到。
summary:规定表格内容的摘要,屏幕阅读器可以利用该属性,不会有其他视觉效果。
width:用 css 的 width 代替。
css 属性
table-layout:automatic(default) | fixed | inherit(列宽度由单元格内容设定 | 列宽由表格宽度和列宽度设定 | 继承父属性)
需要注意的是,表格以及列设置的 width 属性在 table-layout 为 automatic 时都是表现为 min-width,当 table-layout 的值为 fixed 时则表现为固定的 width 值。
当需要表格内容的宽度在控制范围内,不会超出自己设置的范围,则可以用 fixed 属性值来设置这个属性,下面举个例子。
 
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML:
 <table>
<thead>
<tr>
<th>title</th>
<th>title</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td>the</td>
<td>testinglongstring</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>-</td>
<td>Row</td>
</tr>
<tr>
<td>the</td>
<td>third</td>
<td>Row</td>
</tr>
</tbody>
</table>

CSS:

 table{
width: 300px;
border:1px solid #000;
}
table td,table th{
border:1px solid #000;
}
没有显式加 table-layout 这个属性时是默认为 automatic 值,此时由于 testinglongstring 内容比较长,表格自动调整列的宽度,效果如下:
table 标签加了 table-layout:fixed 属性后,浏览器直接渲染表结构(相当于显示没有内容的表),太长的内容会覆盖到其他表格,效果如下:
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
 
而往往我们希望既保持我们要的列宽度,同时确保内容不会这样覆盖到其他表格单元单元(针对英文)。这里就要涉及到另外两个 css 属性了:
1、word-wrap:normal(default)| break-word(只在允许的断字点换行 | 在长单词或 URL 地址内部进行换行)
这里主要用到 break-word 属性值。
2、work-break:normal(defaut)| break-all | keep-all(默认的换行规则 | 允许在单词内换行 | 只能在半角空格或连字符处换行)
这里主要用到 break-all 属性值。
用到的两个 css 属性的属性值作用类似,但有些区别,break-word 只有在单个单词都超过外围宽度的时候才会断单词;break-all 则是把每个行填满,然后行尾不管是单词还是空格都断为下一行,个人优选 word-wrap 属性,可以减少断单词的几率,毕竟不得已才断单词,断了后会影响单词内容表达。具体辨析可以看 《你真的了解word-wrap和word-break的区别吗?》讲得比较详细。
 
--------------------------------------------------------------举个栗子--------------------------------------------------------------
沿用上例的 HTML 结构,举 word-wrap 属性的例子:
CSS:
 table {
width: 300px;
border: 1px solid #000;
table-layout: fixed;
word-wrap:break-word;
}
table td,
table th {
border: 1px solid #000;
}
.odd{
width: 120px;
}
表现如下:
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
 
(2)<thead>、<tbody>、<tfoot>
align:属性规定内容的水平对齐方式,用 css 属性 text-align 代替。
valign:( top|middle|bottom|baseline ),规定 tbody 元素中内容的垂直对齐方式,默认是 middle。相当于 css 的 vertical-align 属性,这里 bottom 和 baseline 在 w3shcool 上还有一些辨析,不过只是对于不同字号的英文内容来说有点用处。
还有 char,charoff 属性几乎是用不到的,所以不列举了。
注意
1、<thead>、<tfoot> 标签内部必须拥有 <tr> 标签;
2、<thead> 标签不管放在 <table> 内的哪个位置,都会被定位到表格的头部,同理 <tfoot> 会被定位到底部。另外,和我们的常识不同,<tfoot> 标签是要放在 <tbody> 标签之前的,结合官方文档和我自己的理解,主要是因为 <thead> 和 <tfoot> 内的内容一般比较重要,这样能保证在表现具有大量行内容的表格时能够提前渲染 <tfoot>,让用户先看到。
3、<thead>、<tbody>、<tfoot> 的结束标签为了精简,均可以省略。
4、设置 <thead> 和 <tfoot> 的一个好处是,当打印很长的需要分页的表格时,每一页上都会有 <thead>、<tfoot> 的内容。
 
(3)tr
align,valign:同(2)
 
(4)td,th
abbr:规定单元格中内容的缩写版本。不会在普通的 web 浏览器中造成任何视觉效果方面的变化。屏幕阅读器可以利用该属性。
headers:规定表头与单元格相关联。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。
scope:定义将表头单元与数据单元相关联的方法。不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。
align,valign:同(2)。需要留意的是 th 默认是居中属性的,而且 th 内的字体是加粗的。
nowrap:规定表格单元格中的内容不换行。用 white-space: nowrap 代替
colspan:规定单元格可横跨的列数。比较常用,相当于 word 中的合并横向的单元格。
rowspan:规定单元格可横跨的行数。比较常用,相当于 word 中的合并垂直方向的单元格。
 
(5)caption
align:(top | bottom | left | right ),规定 caption 元素的对齐方式,默认居中。
align 的浏览器支持并不好,只有 top 和 bottom 属性值支持是统一的,left 和 right 在不同浏览器中的表现也不一样,所以这两个属性值当然不用,而 css 属性 caption-side 刚好就只有 top 和 bottom,故完全可以用 css 属性 caption-side 代替 align。至于要实现 left 和 right 的效果,给 caption 加 margin 属性或者 padding 属性或者用其他标签实现都不难 。
css 属性 
caption-side:top | bottom | inherit(表格标题定位在表格之上 | 表格标题定位在表格之下 | 继承父属性)
 
(6)col,colgroup
<colgroup> 标签中的一些属性在一些浏览器中的支持并不好,只有在一些老的浏览器中(IE7-等)才能表现那些属性,具体原因可以点此参考
能够用的属性主要是以下三个:
span:规定列组应该横跨的列数。默认一列,即对表格的一列设置样式。
width:col 元素的宽度。
background:设置背景色,要通过 css 样式来设置。
<col> 标签需要包裹在 <colgroup> 内,就算没有写一般浏览器也会自动帮你加上。属性和 <colgroup> 类似,增加了可以设置 css 的 border 属性。个人认为不在 <colgroup> 标签上设置属性,而是用 <colgroup> 包裹 <col> 的写法比较规范。
说到列,要重新提一下前面的 table-layout 属性,下面举例子说明 col 对这个属性的影响。
 
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML:
 <table>
<colgroup>
<col class="odd"></col>
<col class="even"></col>
<col class="odd"></col>
</colgroup>
<thead>
<tr>
<th>title</th>
<th>title</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td>the</td>
<td>testinglongstring</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>-</td>
<td>Row</td>
</tr>
<tr>
<td>the</td>
<td>third</td>
<td>Row</td>
</tr>
</tbody>
</table>
CSS:
 table {
width: 300px;
border: 1px solid #000;
}
table td,
table th {
border: 1px solid #000;
}
.odd{
width: 120px;
}
设置 120px 的列宽度后,中间列(.even)的宽度不够,但是浏览器会帮你计算并为中间内容空出足够宽度:
设置了 table-layout 属性的 fixed 值后就完全按照自己的意思来渲染了:
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
 
(7)border-collapse | border-spacing | empty-cells
这几个 css 属性,基本只会用在表格上。
border-collapse:separate(defaul)| collapse | inherit (边框会被分开 | 边框会合并为一个单一的边框 | 继承父属性)
border-spacing:length length(定义一个 length 参数,那么定义的是水平和垂直间距。定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距)
empty-cells:show(defaul)| hide | inherit (在空单元格周围绘制边框 | 不绘制 | 继承父属性)
注意
border-spacing 和 empty-cells 属性只有在 border-collapse 为 separate 是才有效的。
 
--------------------------------------------------------------举个栗子--------------------------------------------------------------
HTML:
 <table>
<tr>
<td>Row</td>
<td>One</td>
</tr>
<tr>
<td>Row</td>
<td></td>
</tr>
</table>
CSS:
 table {
border-collapse: separate;
border-spacing: 5px 20px;
empty-cells: hide;
border:1px solid #000;
}
td{
border:1px solid #000;
}
表现如下:
--------------------------------------------------------------吃完栗子--------------------------------------------------------------
 
三、表格 css 样式
(1)单线边框
HTML:
 <table>
<tr>
<td>Row</td>
<td>One</td>
</tr>
<tr>
<td>Row</td>
<td>Two</td>
</tr>
</table>
(方法一) CSS:
 table {
width: 200px;
border-left: 1px solid #000;
border-top: 1px solid #000;
border-collapse: collapse;
}
td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
(方法二)CSS:
 table {
width: 200px;
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
效果如下:
 
(2)列和行的高亮
在复杂的多行多列的表格中,鼠标停留的行或列高亮能够带来更优的体验,下面讲讲这方面的应用。
1、行的高亮
行的高亮实现比较简单,可以使用 css 的 :hover 伪类实现,即 tr:hover 即可实现,后面的表格例子会出现。
2、列的高亮
列的高亮用 css 似乎没有什么实现的方法,故还是用 JavaScript 实现。
<1>原生 JavaScript
原生 JavaScript 实现比较麻烦, A Complete Guide to the Table Element 文章介绍了一种原生 js 代码的写法。不过代码的兼容性不是很好,IE10 以下的版本就无法支持了(替换 addClass() 和 removeClass() 方法后在 IE9 下也可以用)。下面是我自己写的原生 JavaScript 实现方法,不过也只能支持 IE9+,IE8 及以下的 IE 浏览器要加兼容性代码:
JavaScript:
 //#table可以是table的id,也可以是tbody的id
var element = document.getElementById("table");
var row_col = element.rows;
window.onload = function() {
for (var i = 0; i < row_col.length; i++) {
var cell_col = row_col[i].cells;
for (var j = 0; j < cell_col.length; j++) {
cell_col[j].addEventListener('mouseover', function() {
cellIndex(this, true);
}, false);
cell_col[j].addEventListener('mouseout', function() {
cellIndex(this, false);
}, false);
}
}
}
function cellIndex(element, bool) {
for (var i = 0; i < row_col.length; i++) {
var cell_col = row_col[i].cells;
for (var j = 0; j < cell_col.length; j++) {
if (element == cell_col[j]) {
highLight(j, bool);
}
}
}
}
function highLight(index, bool) {
for (var i = 0; i < row_col.length; i++) {
var cell_col = row_col[i].cells;
if (bool) {
//列高亮,#eee为高亮颜色
cell_col[index].style.backgroundColor = "#eee";
} else {
//移除列高亮,#fff为原来颜色
cell_col[index].style.backgroundColor = "#fff";
}
}
}
<2>引用Jquery
使用 Jquery 框架实现方便很多,而且能够兼容 IE5.5+。好久没写 Jquery,选择器不是很熟,所以参考了一下 html5及css3对table表格高亮当前行列的多浏览器兼容写法 中的代码,其中 high_light css 类中定义高亮的颜色:
 $(document).ready(
function() {
$('table td').hover(
function() {
//获取鼠标所在的 td 在所在行中的 index
var td_index = $(this).parent().children('td').index($(this)[0]);
$("table tr:not(:has(th))").each(
function(i){
$(this).children("td").eq(td_index).addClass('high_light');
}
);
},
function() {
var td_index = $(this).parent().children('td').index($(this)[0]);
$("table tr:not(:has(th))").each(
function(i){
$(this).children("td").eq(td_index).removeClass('high_light');
}
);
}
);
}
);
 
四、清爽简约的表格
下面给出一些简约的实用的表格样式,留作备用。
 
(1)不带竖线的表格
HTML:
 <table>
<thead>
<tr>
<th>title</th>
<th>title</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<td>the</td>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>-</td>
<td>Row</td>
</tr>
<tr>
<td>the</td>
<td>third</td>
<td>Row</td>
</tr>
</tbody>
</table>
CSS:
 table {
width: 300px;
line-height: 2em;
font-family: Arial;
border-collapse: collapse;
}
thead tr {
color: #ae1212;
border-bottom: 2px solid #980000;
}
tbody tr {
color: #bd3030;
font-size: 0.8em;
border-bottom: 1px solid #ffaeae;
}
th {
font-weight: normal;
text-align: left;
}
th,td {
padding: 0 10px;
}
效果如下:
 
 
(2)不带横线的表格
 HTML:
< 沿用例 1)的 HTML >
CSS:
 table {
width: 300px;
line-height: 2em;
font-family: Arial;
text-align: center;
border-collapse: collapse;
border-top: 2px solid #980000;
border-bottom: 2px solid #980000;
}
thead tr {
color: #ae1212;
}
tbody tr {
color: #bd3030;
font-size: 0.8em;
}
th {
font-weight: normal;
}
th,td {
border-left: 1px solid #ffaeae;
border-right: 1px solid #ffaeae;
}
效果如下:
 
(3)带背景表格
1、HTML:
< 沿用例 1)的 HTML >
CSS:
 table {
width: 300px;
line-height: 2em;
font-family: Arial;
border-collapse: collapse;
}
thead tr {
color: #902d2d;
background-color: #e09999;
border-bottom: 1px solid #fff;
}
tbody tr {
color: #ac5959;
font-size: 0.8em;
border-bottom: 1px solid #fff;
background-color: #ffe7e7;
}
tbody tr:hover {
background-color: #ffd4d4;
}
th {
font-weight: normal;
text-align: left;
}
th,td {
padding: 0 10px;
}
效果如下:
 
2、HTML:
< 沿用例 1)的 HTML >
CSS:
 table {
width: 300px;
line-height: 2em;
font-family: Arial;
border-collapse: collapse;
}
th,td {
padding: 0 10px;
}
th {
color: #a03f3f;
font-weight: normal;
text-align: left;
background-color: #f2caca;
border: 1px solid #fff;
}
td{
color: #c48080;
font-size: 0.8em;
background-color: #fff3f3;
border-top: 1px solid #ffdede;
border-left: 1px solid #ffdede;
}
tbody tr:hover th{
background-color: #ffdede;
border-right:1px solid #ffdede;
color:#9a4242;
}
tbody tr:hover td{
background-color: #ffdede;
border-left:1px solid #ffdede;
border-top: 1px solid #ffdede;
color:#9a4242;
}
效果如下:
 
 
3、HTML:
 <table>
<colgroup>
<col class="odd"></col>
<col class="even"></col>
<col class="odd"></col>
<col class="even"></col>
</colgroup>
<thead>
<tr>
<th>title</th>
<th class="even_th">title</th>
<th>title</th>
<th class="even_th">title</th>
</tr>
</thead>
<tbody>
<tr>
<td>the</td>
<td>the</td>
<td>the</td>
<td>the</td>
</tr>
<tr>
<td>first</td>
<td>-</td>
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>Row</td>
<td>Row</td>
<td>Row</td>
<td>Row</td>
</tr>
</tbody>
</table>
CSS:
 table {
width: 300px;
line-height: 2em;
font-family: Arial;
border-collapse: collapse;
text-align: center;
}
th,td {
padding: 0 10px;
}
th {
color: #a03f3f;
font-weight: normal;
}
td{
color: #c48080;
font-size: 0.8em;
}
thead th{
background-color: #fbdcdc;
}
.odd{
background-color: #fff3f3;
}
.even{
border-left:1px solid #fff;
border-right:1px solid #fff;
background-color: #ffe9e9;
}
.even_th{
background-color: #eec4c4;
}
效果如下:
 
4、适用于表现简单后台数据的表格
HTML:
 <table>
<tr>
<td>the</td>
<td>the</td>
<td>the</td>
<td>the</td>
</tr>
<tr>
<td>first</td>
<td>-</td>
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>Row</td>
<td>Row</td>
<td>Row</td>
<td>Row</td>
</tr>
</table>
CSS:
 table {
width: 300px;
line-height: 2em;
font-family: Arial;
border-width: 1px;
border-style: solid;
border-color: #eec4c4 #eec4c4 #fff #fff;
text-shadow: 0 1px 0 #FFF;
border-collapse: separate;
border-spacing:;
background-color: #ffe9e9;
}
th {
color: #a03f3f;
font-weight: normal;
text-align: left;
}
td {
color: #c48080;
font-size: 0.8em;
}
th,td {
padding: 0 10px;
border-width: 1px;
border-style: solid;
border-color: #fff #fff #eec4c4 #eec4c4;
}
效果如下:
 
这里也只是列举比较基本的表格实例,加圆角、背景图等等在不同情况下可以获得更好的视觉效果,以后如果有看到更好的例子会继续补充。表格在现在的使用中已不像以前那么广了,基本只有在表现数据的时候才会用到,所以我并没有太深入地去了解表格的表现原理,这里涉及的知识都比较基础,而且只是冰山一角,想要进一步了解的可以去看看 HTML 4.01 和 CSS 2.01关于 table 的文档(文末有附链接)。写这篇博文的时候也发现了其他一些有趣的关于表格的应用与拓展,比如响应式的表格、表格搜索、表格排序等等,再加进来博文就太长了(为自己太懒找个借口......),等有空的时候再来了解总结一下吧。
 

本文来源:JuFoFu

本文地址:http://www.cnblogs.com/JuFoFu/p/5140302.html

 
 
水平有限,错误欢迎指正。原创博文,转载请注明出处。
 
参考文档:
 
参考文章:
W3Cfuns . 参透Html表格
 
 
 
 
 
 
 
 
 

HTML表格基础详解的更多相关文章

  1. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  2. Dom探索之基础详解

    认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...

  3. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  4. javaScript基础详解(1)

    javaScript基础详解 首先讲javaScript的摆放位置:<script> 与 </script> 可以放在head和body之间,也可以body中或者head中 J ...

  5. Python学习一:序列基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7858473.html 邮箱:moyi@moyib ...

  6. Python学习二:词典基础详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...

  7. 三剑客基础详解(grep、sed、awk)

    目录 三剑客基础详解 三剑客之grep详解 1.通配符 2.基础正则 3.grep 讲解 4.拓展正则 5.POSIX字符类 三剑客之sed讲解 1.sed的执行流程 2.语法格式 三剑客之Awk 1 ...

  8. java继承基础详解

    java继承基础详解 继承是一种由已存在的类型创建一个或多个子类的机制,即在现有类的基础上构建子类. 在java中使用关键字extends表示继承关系. 基本语法结构: 访问控制符 class 子类名 ...

  9. java封装基础详解

    java封装基础详解 java的封装性即是信息隐藏,把对象的属性和行为结合成一个相同的独立单体,并尽可能地隐藏对象的内部细节. 封装的特性是对属性来讲的. 封装的目标就是要实现软件部件的"高 ...

随机推荐

  1. Java SE 5.0 - SE 8 的功能增强

    Table of Contents 前言 Java 5.0 Generics Enhanced for Loop Autoboxing Typesafe Enums Varargs Static Im ...

  2. eclipse集成python(Pydev插件安装)

    1.下载PyDev的压缩包,解压后会有features和plugins两个文件夹,将两个文件夹的内容拷贝到eclipse对应的文件夹中,重新启动eclipse 2.配置python 2.1打开ecli ...

  3. java程序员笑不死的经历ส้้้้้้้้้

    ส้้้้้้้้้้ส้้้้้้้้้้ส้้้้้้้้้ 1.程序猿最烦两件事,第一件事是别人要求他给自己的代码写文档,第二件呢?是别人的程序没有留下文档. 2.宪法顶个球!中国的法律都是.t ...

  4. 孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4

    孤荷凌寒自学python第六十五天学习mongoDB的基本操作并进行简单封装4 (完整学习过程屏幕记录视频地址在文末) 今天是学习mongoDB数据库的第十一天. 今天继续学习mongoDB的简单操作 ...

  5. [Ceres]C++优化库

    官网教程: http://ceres-solver.org/nnls_tutorial.html 定义了一个最小二乘法求解器 自动求导的功能

  6. 波动数列 神奇的dp

    问题描述 观察这个数列: 1 3 0 2 -1 1 -2 ... 这个数列中后一项总是比前一项增加2或者减少3. 栋栋对这种数列很好奇,他想知道长度为 n 和为 s 而且后一项总是比前一项增加a或者减 ...

  7. android 继承ListView实现滑动删除功能.

    在一些用户体验较好的应用上,可以经常遇见   在ListView中  向左或向右滑动便可删除那一项列表. 具体实现  则是继承ListView实现特定功能即可. (1). 新建 delete_butt ...

  8. 哈希UVALive 6326 Contest Hall Preparation

                              Encrypting passwords is one of the most important problems nowadays, and y ...

  9. input file request.files[] 为空

    需要在 form 里设置 一句话 :  $('form').attr("enctype", "multipart/form-data"); <form e ...

  10. 实时流处理Storm、Spark Streaming、Samza、Flink孰优孰劣

    对于一个成熟的消息中间件而言,消息格式不仅关系到功能维度的扩展,还牵涉到性能维度的优化.随着Kafka的迅猛发展,其消息格式也在不断的升级改进,从0.8.x版本开始到现在的1.1.x版本,Kafka的 ...