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

HTML table markup tutorial (48): CSS modified table

Pagination Examples and Good Practices

Tutorial on how to use profile in MySQL

Native JS to implement breathing carousel

Chrome 4.0 supports GreaseMonkey scripts

Analysis of mysql temporary table usage [query results can be stored in temporary tables]

Let's talk about the storage engine in MySQL

Use PHP's mail() function to send emails

Solution to forgetting the MYSQL database password under MAC

Implementation of textarea adaptive height solution in Vue

My CSS framework - base.css (reset browser default style)

Recommend

MySQL learning notes: complete select statement usage example detailed explanation

MySQL 5.7.17 compressed package installation and configuration method graphic tutorial

The presentation and opening method of hyperlink a

How to play local media (video and audio) files using HTML and JavaScript

MySQL SQL Optimization Tutorial: IN and RANGE Queries

Combining insert and select to implement the method of "inserting the maximum value of a field in the database + 1"

How to implement dual-machine master and backup with Nginx+Keepalived

A brief analysis of CSS3 using text-overflow to solve text layout problems

JavaScript gets the scroll bar position and slides the page to the anchor point

Implementation of textarea adaptive height solution in Vue

A brief analysis of the function calling process under the ARM architecture

Solution to MySQL service 1067 error: modify the mysql executable file path

MySQL Flush-List and dirty page flushing mechanism

Detailed steps to install web server using Apache httpd2.4.37 on centos8

Example code for inputting the license plate number and province abbreviation in html