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 tutorial on downloading mysql on Windows 10
MySQL versions are divided into Enterprise Editio...
React's reconciliation algorithm Diffing algorithm strategy detailed explanation
Table of contents Algorithmic Strategy Single-nod...
Basic knowledge: What does http mean before a website address?
What is HTTP? When we want to browse a website, w...
Docker network mode and configuration method
1. Docker Network Mode When docker run creates a ...
MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control
Table of contents 1. Concurrent access control 2....
Application example tutorial of key in Vue page rendering
introduction During the front-end project develop...
The difference between the four file extensions .html, .htm, .shtml and .shtm
Many friends who have just started to make web pag...
Detailed tutorial on installing MySQL 8.0.20 database on CentOS 7
Related reading: MySQL8.0.20 installation tutoria...
Practice of dynamically creating dialog according to file name in vue+el-element
Table of contents background accomplish 1. Encaps...
How to output Chinese characters in Linux kernel
You can easily input Chinese and get Chinese outp...
Understanding and application analysis of mysql pessimistic locking and optimistic locking
This article uses examples to describe MySQL pess...
Front-end state management (Part 2)
Table of contents 1. Redux 1.1. Store (librarian)...
Solution to primary key conflict when innodb_index_stats reports an error when importing backup data
Fault description percona5.6, mysqldump full back...
MySQL common test points for the second-level computer exam 8 MySQL database design optimization methods
8 optimization methods for MySQL database design,...
Vue project code splitting solution
Table of contents background Purpose Before split...