第一种是没有缺口的，如下图
第二种是有缺口的，如下图
两种表格的最大特点就是不用给表格里的每个 li 元素都单独设置 css 样式，要用的时候直接闭着眼睛循环 li 标签即可。
第一种的特点是
1、内边框的大小是一致的。
2、内边框的大小和外边框的大小可以分别设置。
3、内边框和外边框的颜色可以分别设置。
4、每个小方框的白色部分大小是一致的（空缺部分不算）。
第二种的特点是
1、空缺部分可以不用被方框包裹。
2、内边框的大小是一致的。
3、内边框和外边框的颜色要一致（要不然不好看）。
4、内边框的大小和外边框的大小要一致（要不然不好看）。
5、每个小方框的白色部分大小是一致的。
第一种实现
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
width: 500px;
margin: 200px auto;
border: 10px solid red;
overflow: hidden;
}
ul li{
float: left;
list-style: none;
width: 92px;
height: 100px;
border-right: 10px solid blue;
border-bottom: 10px solid blue;
margin-bottom: -10px;
}
li:nth-child(5)~li{
padding-top: 10px;
}
li:nth-child(5n){
border-right: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
</ul>
</body>
</html>原理
1、 给每个 li 元素设置负的 margin-bottom，这样每个 li 元素底部的元素会往上跑，导致每个 li 元素的底部边框重叠在一起。
2、因为第一步的操作，从二行开始的 li 元素的可视区高度会减少，所以要给第二行开始的每个 li元素设置一个 padding-top（撑开第二行开始的每个 li元素的高度），这样可以使第二行开始的每个 li 元素的可视区高度和第一行 li元素的可视区高度相等，还可以使第二行开始的每个 li 元素的子元素的位置和第一行 li 元素的子元素的位置相等（利用 li:nth-child(5)~li）。
3、对每一行最右边的 li 元素进行处理，使每一行最后边的 li 元素的右边框设置成 none （利用 li:nth-child(5n) ）。
第二种实现
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
width: 510px;
margin: 200px auto;
border-top: 10px solid red;
border-left: 10px solid red;
overflow: hidden;
}
li{
float: left;
list-style: none;
width: 92px;
height: 100px;
border-right: 10px solid blue;
border-bottom: 10px solid blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
<li><a href="#">11</a></li>
</ul>
</body>
</html>原理
没啥原理，一看就懂。