layui表格内容挤在一起_HTML -- 表格标签

最新推荐文章于 2021-12-07 11:39:22 发布

weixin_39640845

最新推荐文章于 2021-12-07 11:39:22 发布

阅读量357

点赞数

文章标签： layui表格内容挤在一起

本文链接：https://blog.csdn.net/weixin_39640845/article/details/112491419

版权

Ⅰ 原始表格

只有表格样式,无实际表格意义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习哈利给给</title>
</head>
<body>
<table>
    <tr>
        <td>姓名</td>
        <td>攻击</td>
        <td>生命</td>
    </tr>
    
    <tr>
        <td>潘哈德 EBR 105</td>
        <td>390</td>
        <td>1500</td>
    </tr>
    
    <tr>
        <td>曼蒂科尔</td>
        <td>390</td>
        <td>1490</td>
    </tr>
</table>

</body>
</html>

Ⅱ 为表格添加框线

<table border="1px"> !-- 增加框线,指定宽度1px

<table border="1px">
    ...
</table>

依然丑陋无比

Ⅲ 修改表格宽度

<table width="300px"> !-- 指定表格宽度300px

<table border="1px" width="200px">

表格整体宽度200px,里面内容为了完全显示出来,自动换行

Ⅳ 修改表格高度

<table height="200px"> !-- 指定表格高度

<table border="1px" width="200px" height="200px">

指定宽度高度

Ⅴ 表格位置居中显示

align='center' -- 表格相对网页居中

<table border="1px" width="200px" height="200px" align="center">

表格相对网页居中显示

Ⅵ 单元格水平方向居右显示

align='right' -- 表格,单元格相对居右显示

表格,单元格居右

Ⅶ 垂直方向居上,及居下显示

valign="bottom" -- 垂直居下
valign="top" -- 垂直居上

Ⅷ 表格线条美化

<table cellspacing="50px"> -- 单元格线条宽度设置

<table cellpadding="20px" > -- 单元格框线和单元格内容的距离

单线条表格框线
- 方式一
- <table border="1px" cellspacing="0px" > !-- 两根线合到一起

- 方式二
- <table bgcolor="red" border="0px" cellspacing="1px">

cellspacing="1px"  -- 默认颜色为白色
bgcolor="red"   -- 设置颜色为红色

- 方式三 -- 常用

<table style="border-collapse: collapse;border: 1px solid green"  border="1px">
border-collapse: collapse;  -- 让边框合并到一起
border: 1px  -- 边框样式宽度  1像素
solid  -- 边框样式实线样式
green  -- 线条颜色

Ⅸ 单元格合并

垂直方向单元格合并

下面错误的示范 -- 单元格变形

水平方向单元格合并

weixin_39640845

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layui表格内容挤在一起_HTML -- 表格标签

Ⅰ 原始表格只有表格样式,无实际表格意义<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格练习哈利给给</title></head><body><table> &...
复制链接

扫一扫