html table样式_CSS表格样式

最新推荐文章于 2024-07-26 14:13:22 发布
最新推荐文章于 2024-07-26 14:13:22 发布
阅读量854 收藏 1
点赞数
文章标签： html table样式 html表格内外边框颜色 html表格合并 table 样式 table样式 table表格可拖动交换位置

20052c11ff86888b1b9bbcf60dc20c48.png

    表格的样式一般可以在HTML中直接定义，但是结构和样式需要分开声明，这可以方便后期的维护和修改。CSS中的表格样式有caption-side(表格标题位置)、border-collapse(表格边框合并)、border-spacing(表格边框间距)。 

caption-side

    caption-side属性取值只有2个，如下表

属性值说明
top标题在顶部(默认)
bottom标题在底部

    举一个标题在底部的示例

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>表格标题位置title>

        <style type="text/css">

            table{

                caption-side: bottom;

            }

            table,td{

                border: 1px solid silver;

            }

        style>

    head>

    <body>

        <table>

            <caption>四大天王caption>

            <tr>

                <td>刘德华td>

                <td>60岁td>

            tr>

            <tr>

                <td>张学友td>

                <td>60岁td>

            tr>

            <tr>

                <td>郭富城td>

                <td>56岁td>

            tr>

            <tr>

                <td>黎明td>

                <td>55岁td>

            tr>

        table>

    body>

html>

44f5c57979dfb90684d44dae75f2139d.png

border-collapse

    在表格加入边框后单元格之间有一定的空隙 ，为了美观，我们可以把单元格之间的空隙去除。

    border-collapse属性取值有2个，如下表

属性值说明
separate边框分开，有空隙
collapse边框合并，无空隙

    示例： 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>表格边框合并title>

        <style type="text/css">

            table{

                border-collapse: collapse;

            }

            table,td{

                border: 1px solid silver;

            }

        style>

    head>

    <body>

        <table>

            <caption>四大天王caption>

            <tr>

                <td>刘德华td>

                <td>60岁td>

            tr>

            <tr>

                <td>张学友td>

                <td>60岁td>

            tr>

            <tr>

                <td>郭富城td>

                <td>56岁td>

            tr>

            <tr>

                <td>黎明td>

                <td>55岁td>

            tr>

        table>

    body>

html>

534c98b0d46d5dd8a5b703e9014bcaba.png 

border-spacing

    表格边框的间距，直接用像素值。 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>表格边框间距title>

        <style type="text/css">

            table{

                border-spacing: 5px;

            }

            table,td{

                border: 1px solid silver;

            }

        style>

    head>

    <body>

        <table>

            <caption>四大天王caption>

            <tr>

                <td>刘德华td>

                <td>60岁td>

            tr>

            <tr>

                <td>张学友td>

                <td>60岁td>

            tr>

            <tr>

                <td>郭富城td>

                <td>56岁td>

            tr>

            <tr>

                <td>黎明td>

                <td>55岁td>

            tr>

        table>

    body>

html>

2e3cb5531517d5885613cdfacec72d89.png

本节主要学习了表格样式，最后对其总结。

  • 表格标题位置：caption-side   

  • 表格边框合并：border-collapse

  • 表格边框间距：border-spacing

weixin_39942451
关注
html中table的表格样式
05-24
NULL 博文链接：https://zhou-hong-liang.iteye.com/blog/365301
CSS表格样式1
05-27
这篇博文“CSS表格样式1”可能详细讲解了如何利用CSS来定制HTML表格的外观和布局。由于描述中没有提供具体信息，我将根据常见的CSS表格样式实践进行详细讲解。 首先，我们来了解一下HTML表格的基本结构，由`<table>...
Html Table 样式
yuling59520的专栏
06-01 2万+
框线制作常用代码代码含义<table>...</table>建立表格，所有的其他标记都需要在此标记中  <table width=* heigth=*></table>设定表格宽度width和高度height，属性值可以使用点数，如：width=50，也可以使用百分比，如：width=50%。<table bgcolor=*></table> 表格背景色。属性值可使用颜色英文名称如：bgcolor=Blue，也可以使用十六进制值如：bgcolor=#799ED2 。<table background=*><
【HTML+CSS】HTML表格：从基础到进阶的全面指南
最新发布
Xiaoxin的博客
07-26 1296
在Web开发中，HTML表格（）是一个不可或缺的元素，它不仅能够以结构化的方式展示数据，还能通过CSS进行丰富的样式设计，提升用户体验。本文将带你从HTML表格的基础语法开始，逐步深入到表格的高级用法，包括布局技巧、响应式设计以及无障碍访问性优化。
html表格（table）样式说明
网站开发初中级代码参考-转载
07-20 132
框线制作常用代码 代码 含义 &lt;table&gt;...&lt;/table&gt; 建立表格，所有的其他标记都需要在此标记中 &lt;table width=* heigth=*&gt;&lt;/table&gt; 设定表格宽度width和高度height，属性值可以使用点数，如：width=50，也可以使用百分比，如：width=50%。 &lt;table bg...
HTML table样式
qq_43527694的博客
07-13 5184
如果想在网页中建一个如下table表格应该怎么做呢？ 首先建一个表<table> <table>/*table标签就是建一个表格*/ <tr>/*tr标签就是table row，即为表格中的一行*/ <th>学号</th>/*th标签即table head，就是表头*/ <th>姓名</th> <th>手机号</th> <th>家庭地址</th&
html css样式之table
桔子大大
07-02 761
table 样式美化1. 单像素边框CSS表格这是一个很常用的表格样式。 源代码： 1 &lt;!-- CSS goes in the document HEAD or added to your external stylesheet --&gt; 2 &lt;style type="text/css"&gt; 3 table.gridtable { 4 font-family: ...
CSS.table.rar_Table_css table_table css_表格css
09-20
以下是一些关于"CSS.table.rar_Table_css table_table css_表格css"中涉及的关键知识点： 1. **表格元素基础**： - `<table>`：这是HTML中创建表格的基本标签，用于定义表格的结构。 - `<tr>`：表示表格行（Table...
html.rar_CSS html5_html5_多表格
09-14
综上所述，这个压缩包中的“html.doc”文档很可能是对HTML5中的表格特性、CSS样式应用、网页布局和多媒体处理等方面进行的详细讲解和实例演示。掌握这些知识点对于任何Web开发者来说都至关重要，无论是初学者还是...
CSSsc.rar_java web_动态表格 html_样式表_浏览器_网页设计
09-14
CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术。 网页设计最初是用HTML标记来定义页面文档及格式，例如标题<h1>、段落<p>、表格<table>、链接...
比较完整的CSS定义表格样式.zip_css
09-20
本资源"比较完整的CSS定义表格样式.zip"专注于使用CSS来美化和格式化HTML表格，使其在网页上更具吸引力和功能性。下面我们将详细探讨如何使用CSS来定义表格样式。 首先，表格在HTML中的基本结构由`<table>`标签定义...
html,table常用样式
11-30
html,table常用样式，适用于对htm样式美观有要求的项目
HTML常用table样式
08-06
源代码包 博文链接：https://atgoingguoat.iteye.com/blog/2074431
html 简单的table样式
热门推荐
z_qifa的博客
07-03 2万+
效果预览： 代码： 1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 title>html 简单的table样式title> 6 style type="text/css"> 7 /* gridtable */ 8 table.grid
html表格的css样式
13-c的博客
12-21 2545
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>table-test</title> <style> table { border: solid 1px lightblue; } </style> </head> <body> <table> <tr> <td>hellow</td>
python xlsx 样式 谷歌开源 样式_一个不错的table样式
weixin_39966130的博客
03-01 307
CSS Tables/* CSS Document */body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;background: #E6EAE9;}a {color: #c75f3e;}#mytable {width: 700px;padding: 0;...
一篇文章带你了解HTML表格及其主要属性介绍
pdcfighting的博客
10-22 303
一、定义一个HTML表格 使用标签定义HTML表格。 标签定义表中的每一行使用。使用标签定义表头。默认情况下，表标题是粗体和居中的。一个表的数据/单元使用 标签定义。 <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr&g
html table css 样式,table Css常用样式
weixin_39776991的博客
06-19 211
table Css常用样式第一行第二行&相关文档：作者：tinyhill　来自：蓝色理想 对 《5 个简单实用的 CSS 属性》进行编辑1、CSS Clip剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的top，right，bottom，left 值。图片剪辑实例(演示...
BootStrap CSS全局与表格样式详解
"BootStrap CSS全局样式和表格样式的源码解析" Bootstrap 是一个流行的前端框架，它提供了丰富的预定义样式，使得网页设计更加高效。本篇内容将深入解析BootStrap的CSS全局样式和表格样式，帮助你更好地理解和应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值