HTML table markup tutorial (48): CSS modified table
|
<br />Now let's take a look at how to cleverly use CSS syntax to beautify tables. Note: Unless otherwise stated, the cellspacing, cellpadding, and border values of the tables inserted in the examples in this article are all 0. Example 1: 1px table Many people are keen on making 1px tables, so they have invented various methods. It is much more flexible to use CSS. If you want to create a 1x1 1px table, just simply define the border value. We first use Dreamweaver to insert a 1x1 table with a width of 50, and then define border:1 solid teal in the table or td of the table. The effect of the table is as follows: But it is a little more troublesome to make a non-1x1 table (such as 2x2), because if you directly define the td style border:1 solid teal, the display effect will be as follows: You will find that the outer frame of the table is 1px, while the inner frame becomes 2px. This is due to superposition. To solve this problem we can do this: First, define the style for td: border:#cc0000 solid;border-width:0 1 1 0 , so the table appears as follows Then define the style for the table: border:#cc0000 solid;border-width:1 0 0 1 , so that you can make a complete 1px table. Example 2: 1px table with thick border The inner grid of this table is 1px and the outer border is 3px. With the foundation of Example 1, it is not difficult to make it. You just need to modify the border-width value. The style code used for table is: border:blue solid;border-width:3 2 2 3 , and the style code used for td is: border:blue solid;border-width:0 1 1 0 Example 3: Dashed box table The method is similar to example 1, but change border-style from solid to dashed. The style code used for table is: border:black dashed;border-width:1 0 0 1 , and the style code used for td is: border:black dashed;border-width:0 1 1 0 Example 4: Dotted border table Note that the minimum pixel size for dotted lines is 2. The style code used for table is: border:green dotted; border-width:2 0 0 2 , and the style code used for td is: border:green dotted; border-width:0 2 2 0 Example 5: Double-line border table Note that the minimum pixel size for a double line is 3. The style code used for table is: border:teal 4 double , and the style code used for td is: border:teal 1 solid Example 6: Outset table The style code used for table is: border: 3 outset , and the style code used for td is: border: 1 solid Example 7: Inset frame table The style code used for table is: border: 3 inset , and the style code used for td is: border: 1 solid Example 8: ridge frame table The style code used for table is: border:#ee0000 3 ridge The style code used for td is: border: 1 solid Previous Page 1 2 3 Next Page Read More |
<<: Detailed explanation of the production principle of jQuery breathing carousel
>>: Detailed explanation of Truncate usage in MYSQL
Recommend
Detailed explanation of scroll bar scrolling control of DOM elements in HTML
I don't know if you have ever encountered suc...
Specific use of MySQL operators (and, or, in, not)
Table of contents 1. Introduction 2. Main text 2....
The correct way to use MySQL indexes and detailed explanation of index principles
1. Introduction Why do we need indexes? In genera...
Examples of implementing progress bars and order progress bars using CSS
The preparation for the final exams in the past h...
Use of kubernetes YAML files
Table of contents 01 Introduction to YAML files Y...
Detailed explanation of mysql record time-consuming sql example
mysql records time-consuming sql MySQL can record...
10 HTML table-related tags
In fact many people will say “I’ve seen that table...
Click on the anchor link in JS to scroll smoothly and adjust to the top position freely
Click on the anchor link to scroll smoothly and a...
Steps to create a CentOS container through Docker
Table of contents Preface Create a bridge network...
Details on how to write react in a vue project
We can create jsx/tsx files directly The project ...
SQL implementation of LeetCode (178. Score ranking)
[LeetCode] 178.Rank Scores Write a SQL query to r...
How to configure environment variables in Linux environment
JDK download address: http://www.oracle.com/techn...
Sample code for batch deployment of Nginx with Ansible
1.1 Copy the nginx installation package and insta...
Apache Calcite code for dialect conversion
definition Calcite can unify Sql by parsing Sql i...
React+Antd implements an example of adding, deleting and modifying tables
Table of contents Table/index.js Table/model/inde...