html table样式的设计 表格边框修饰

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>今日小说排行榜</title>
<style>
table {
  border-collapse: collapse;
  border: 4px double red; /* 表格外边是双线 */
  width:100%;
}

th,td {
  border: 1px dashed green; /* 单元格边框为虚线 */
  border-right:2px dashed green;
  padding: 10px; /* 设置单元格内边距 */
}
caption{ 
font-size:24px;
font-weight: bold;
}
</style>
</head>

<body>
<table width="200" border="1">
<caption>今日小说排行榜</caption>
  <tr>
    <th>排名</th>
    <th>关键词</th>
    <th>趋势</th>
    <th>今日搜索</th>
    <th>最近7日</th>
    <th>相关链接</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
相关推荐
猫猫不是喵喵.几秒前
Vue3 中 computed 计算属性与 watch、watchEffect 监听
前端·javascript·vue.js
En^_^Joy12 分钟前
Vue项目创建与入口配置全攻略
前端·vue.js·arcgis
爱码小白34 分钟前
importlib模块
开发语言·前端·python
猫猫不是喵喵.1 小时前
Vue2 的 Vuex 状态管理与 Vue3 的 Pinia 状态管理
前端·javascript·vue.js
greenbbLV1 小时前
中小公司积分商城选型:SaaS与私有化方案对比解析
大数据·前端·小程序
NutShell Wang3 小时前
Vite 8.1 深度拆解:Rolldown 统一打包器如何终结前端构建的「双引擎时代」
前端·rust·开源·vite·开发者工具·vibe coding
朱容zr3331333 小时前
请解释“回表”的概念。
java·前端·数据库
软件技术NINI3 小时前
盗墓笔记html+css+js 2页
css·笔记·html
leslie1183 小时前
webpack笔记
前端·webpack
宁风NF3 小时前
JavaScript:内存、垃圾回收、性能优化
开发语言·前端·javascript·学习·性能优化·es6