Dreamweaver가 표를 만드는 데 탁월한 작업을 수행했다는 것을 알고 있지만 특정 효과를 얻으려면 CSS와 결합해야 하는 경우가 많습니다. 먼저 표 테두리에 대한 CSS 구문을 정리한 다음 방법을 소개하겠습니다. CSS를 사용하여 테이블의 테두리를 아름답게 만듭니다.
테이블 테두리의 CSS 구문
구체적인 내용에는 위쪽 테두리 너비, 오른쪽 테두리 너비, 아래쪽 테두리 너비, 왼쪽 테두리 너비, 테두리 너비, 테두리 색상, 테두리 스타일, 위쪽 테두리, 아래쪽 테두리, 왼쪽 테두리, 오른쪽 테두리, 테두리, 너비, 높이, 관련 라벨 등
1. 상단 테두리 너비
구문: border-top-width:
허용되는 값: 얇음 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
위쪽 테두리 너비 속성이 사용됩니다. 너비를 지정합니다. 요소의 상단 테두리. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 상단 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
2. 오른쪽 테두리 너비
구문: border-right-width:
허용되는 값: 얇음 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과 호환: 아니요
오른쪽 테두리 너비 속성은 지정에 사용됩니다. 요소의 오른쪽 테두리 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 오른쪽 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
3. 하단 테두리 너비
구문: border-bottom-width:
허용되는 값: 얇음 | 중간 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
아래쪽 테두리 너비 속성이 사용됩니다. 요소의 아래쪽 테두리 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 하단 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
4. 왼쪽 테두리 너비
구문: border-left-width:
허용되는 값: 얇음 |
초기 값: 중간
적용 대상: 모든 개체
이전 버전과 호환: 아니요
왼쪽 테두리 너비 속성은 지정에 사용됩니다. 요소의 왼쪽 테두리 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 왼쪽 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
5. 테두리 너비
구문: border-width:
허용되는 값: [ 얇음 | 중간 | 길이> ]{1,4}
초기값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
테두리 너비 속성이 설정됩니다. 값이 키워드 또는 길이인 1~4개의 값을 갖는 요소의 경계입니다. 음수 길이는 허용되지 않습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 이 속성은 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성의 약어입니다. 약식 테두리 속성을 사용할 수도 있습니다.
6. 테두리 색상
구문: border-color:
허용되는 값:
초기값: 색상 속성의 값
적용 대상: 모든 객체
하위 호환성: 아니요
테두리 색상 속성은 색상 속성의 값을 설정합니다. 요소 테두리 색상입니다. 1~4개의 키워드를 사용할 수 있습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 약식 테두리 속성을 사용할 수도 있습니다.
7. 테두리 스타일
구문: border-style:
허용되는 값: [ 없음 | 점선 | 이중 | 홈 | 삽입 | 시작 ]{1,4}
초기 값: 없음
적용 대상: 모든 개체
하위 호환성: 아니요
테두리 스타일 속성은 요소의 테두리 스타일을 설정하는 데 사용됩니다. 이 속성은 보이는 테두리를 지정하는 데 사용해야 합니다. 1~4개의 키워드를 사용할 수 있습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 약식 테두리 속성을 사용할 수도 있습니다.
없음: 스타일 없음
점선: 점선
실선: 이중선
홈: 홈이 있는 선; ;
능선: 능선
삽입: 오목
시작: 볼록.
구문: border-top:
허용되는 값: ||
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
top 속성은 요소 테두리의 너비, 스타일 및 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
9. 오른쪽 테두리 구문: border-right:
허용되는 값:
초기 값: 정의되지 않음
적용 대상: 모든 개체
하위 호환성: 아니요
오른쪽 border 속성은 요소 오른쪽 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
10. 하단 테두리 구문: border-bottom:
허용되는 값: ;테두리 스타일> ||
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
하단 속성은 요소 하단 테두리의 너비, 스타일 및 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
11. 왼쪽 테두리 구문: border-left:
허용되는 값:
초기 값: 정의되지 않음
적용 대상: 모든 개체
하위 호환성: 아니요
왼쪽 border 속성은 요소 왼쪽 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
12. 테두리 구문:
허용되는 값: ||
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
테두리 속성은 요소 테두리의 너비, 스타일 및 색상.
테두리 선언의 예는 다음과 같습니다.
H2 { border: 홈 3em }
A:link { border: solid blue } A:visited { border: 얇은 점선 #800080 }
A:active { border: Thick double red }
border 속성은 네 가지 종류의 테두리만 설정할 수 있으며 테두리 세트의 너비와 스타일만 제공할 수 있습니다. 요소의 네 가지 테두리에 서로 다른 값을 제공하려면 웹 페이지 작성자는 위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리, 왼쪽 테두리, 테두리 색상, 테두리 너비, 테두리 스타일과 같은 하나 이상의 속성을 사용해야 합니다. 위쪽 테두리 너비, 오른쪽 테두리 너비, 아래쪽 테두리 너비 또는 왼쪽 테두리 너비입니다.
너비:
허용되는 값:
14. 높이
구문: 높이:
15. 관련 태그
table: 테이블 라벨, 전체 테이블 스타일 정의가 table에 배치되어야 합니다.
td: 셀 라벨, 셀 스타일 정의가 td에 배치되어야 합니다.
如何使用 JavaScript 实现表格列宽拖拽调整功能？Oct 21, 2023 am 08:14 AM如何使用JavaScript实现表格列宽拖拽调整功能？随着Web技术的发展，越来越多的数据以表格的形式展示在网页上。然而，有时候表格的列宽并不能满足我们的需求，可能会出现内容溢出或者宽度不足的情况。为了解决这个问题，我们可以使用JavaScript实现表格的列宽拖拽调整功能，使用户可以根据需求自由调整列宽。实现表格列宽拖拽调整功能，需要以下三个主
css怎么去掉表格重复的边框Sep 29, 2021 pm 06:05 PM在css中，可以使用border-collapse属性来去掉表格中重复的边框，该属性可以设置表格边框是折叠为单一边框还是分开的，只需要将值设置为collapse即可把重叠的边框合并在一起，成为一个边框，实现单线边框的效果。
表格有一条虚线外打印不到怎么办Mar 28, 2023 am 11:38 AM表格有一条虚线外打印不到的解决办法：1、打开excel文件，在打开的页面中点击“打印”；2、在预览页找到“无缩放”，选择调整为一页；3、选择打印机打印文档即可。
Vue中如何实现表格数据的导出和导入Oct 15, 2023 am 08:30 AMVue中如何实现表格数据的导出和导入，需要具体代码示例在使用Vue开发的Web项目中，经常会遇到需要将表格数据导出为Excel或导入Excel文件的需求。本文将介绍如何使用Vue来实现表格数据的导出和导入功能，并提供具体的代码示例。一、表格数据的导出安装依赖首先，我们需要安装一些依赖，用于导出Excel文件。在Vue项目中的命令行中运行以下命令：npmin
使用JavaScript实现表格筛选功能Aug 10, 2023 pm 09:51 PM使用JavaScript实现表格筛选功能随着互联网技术的不断发展，表格成为了网页中常见的展示数据的方式。然而，当数据量庞大时，用户往往会面临找到特定数据的困难。因此，为表格添加筛选功能，让用户可以快速找到所需的数据，成为了很多网页设计的需求。本文将介绍如何使用JavaScript实现表格筛选功能。首先，我们需要有一份表格数据。下面是一个简单的例子：<t
如何使用 JavaScript 实现表格分页功能？Oct 20, 2023 pm 06:19 PM如何使用JavaScript实现表格分页功能？随着互联网的发展，越来越多的网站都会使用表格来展示数据。在一些数据量较大的情况下，需要将数据进行分页展示，以提升用户体验。本文将介绍如何使用JavaScript实现表格分页功能，并提供具体的代码示例。一、HTML结构首先，我们需要准备一个HTML结构来承载表格和分页按钮。我们可以使用<tab
使用JavaScript实现表格数据的分页显示Jun 16, 2023 am 10:00 AM随着数据的不断增长，表格显示变得更加困难。大多数情况下，表格中的数据量过大，导致表格在加载时变得缓慢，而且用户需要不断地浏览页面才能找到自己想要的数据。本文将介绍如何使用JavaScript实现表格数据的分页显示，让用户更容易找到自己想要的数据。一、动态创建表格为了使分页功能更加可控，需要动态创建表格。在HTML页面中，添加一个类似于下面的table元素。
React中使用表格：第一部分Sep 04, 2023 pm 07:21 PM用于呈现数据的最常见的用户界面元素之一是表格。事实证明，使用表格时需要控制很多方面，例如：定义列和标题各种单元格格式（文本、数字、复选框）调整大小过滤动态成长样式在这个由两部分组成的系列中，您将了解使用ReactBootstrapTable组件在React中处理表格数据的细节。您将能够轻松创建复杂且具有专业外观的表格，并且能够自定义各个方面。开始使用 首先，您应该熟悉React本身。如果您需要React入门知识，EnvatoTuts+有一个很棒的系列可以帮助您开始使用React。在本教程中，我们
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
