Layui表格和表单基础练习

最新推荐文章于 2024-04-09 14:30:35 发布

Arvicky

最新推荐文章于 2024-04-09 14:30:35 发布

阅读量499

点赞数

文章标签： css html layui

本文链接：https://blog.csdn.net/arvicky/article/details/119491692

版权

创建基础表格和表单以及基础属性一、表格老样子先导入layui包到工程中并加载<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="/layui-v2.6.8/layui/css/layui.css"><script src="/layui-v2.6.8/layui/layui.js" type=

摘要由CSDN通过智能技术生成

创建基础表格和表单以及基础属性

一、表格

老样子先导入layui包到工程中并加载

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/layui-v2.6.8/layui/css/layui.css">
<script src="/layui-v2.6.8/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<title>表格1</title>
</head>

静态表格应该使用layui-table
表格中的属性：lay-even 隔行换色效果在class中加入。表框效果：lay-skin=“” 三种效果：line行边框，row列边框，nob无边框。
表格整体大小lay-size=“” 可以填写：小：“sm” 大：“lg”。
另外在table中可以使用colgroup标签来对表格格式进行修饰

标签用于对表格中的列进行组合，以便对其进行格式化。如需对全部列应用样式，标签很有用，这样就不需要对各个单元和各行重复应用样式了。标签只能在 table 元素中使用。表格内部可以分为thead,tbody和tfoot。分别是表头，主体，页脚。下面是表格代码，放了三块基本相同的表格只是修改了部分显示属性

<body>
<!-- 设置样式 -->
<!-- 表1 -->
<table class="layui-table" lay-even lay-skin="line" lay-size="sm">
	<colgroup>
	<col width="150">
	<col width="150">
	</colgroup>
	<thead>
	<tr>
		<td>昵称</td>
		<td>事件</td>
		<td>地点</td>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</td>
	</tr>
	<tr>
		<td>王毅</td>
		<td>跑步</td>
		<td>广场</

最低0.47元/天解锁文章

Arvicky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layui表格和表单基础练习

创建基础表格和表单以及基础属性一、表格老样子先导入layui包到工程中并加载<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="/layui-v2.6.8/layui/css/layui.css"><script src="/layui-v2.6.8/layui/layui.js" type=
复制链接

扫一扫

Layui表格和表单基础练习

创建基础表格和表单以及基础属性

一、表格

“相关推荐”对你有帮助么？