Detailed explanation of the frame and rules attributes of the table in HTML

The frame and rules attributes of the table tag can control the display of the border. The frame property controls the visibility of the four outermost borders of the table, while the rules control the visibility of the inner borders of the table.
The possible values and meanings of the frame attribute are as follows:
* void - the default value. Indicates that the outermost border of the table is not displayed.
* box - Displays four borders at the same time.
* border - Display four borders at the same time.
* above - only show the top border.
* below - Show only the bottom border.
* lhs - Show only the left border.
* rhs - Show only the right side border.
* hsides - only show the two horizontal borders.
* vsides - only show the two vertical borders.
There are five possible values for the rules attribute:
* none - The default value. No border.
* groups - add borders to row or column groups.
* rows - add borders to the rows.
* cols - add borders to the columns.
* all - add borders to all rows and columns (cells)

Code example:

XML/HTML CodeCopy content to clipboard

< table border = "1" width = "600" frame = "hsides" rules = "groups" >
< caption > My Ultimate Table </ caption >
< colgroup span = "1" width = "200" > </ colgroup >
< colgroup span = "3" width = "400" > </ colgroup >
< thead >
< tr >
< td > cell 1-1 </ td >
< td > cell 1-2 </ td >
< td > cell 1-3 </ td >
< td > cell 1-4 </ td >
</ tr >
</ thead >
< tfoot >
< tr >
< td > cell 4-1 </ td >
< td > cell 4-2 </ td >
< td > cell 4-3 </ td >
< td > cell 4-4 </ td >
</ tr >
</ tfoot >
< tbody >
< tr >
< td > cell 2-1 </ td >
< td > cell 2-2 </ td >
< td > cell 2-3 </ td >
< td > cell 2-4 </ td >
</ tr >
< tr >
< td > cell 3-1 </ td >
< td > cell 3-2 </ td >
< td > cell 3-3 </ td >
< td > cell 3-4 </ td >
</ tr >
</ tbody >
</ table >

The display effect in the browser is as follows:
201678140942598.jpg (599×127)

<<: MySQL sorting feature details

>>: Use momentJs to make a countdown component (example code)

Vue application example code based on axios request encapsulation

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

Blog

Detailed explanation of HTML form elements (Part 2)

Detailed explanation of the frame and rules attributes of the table in HTML

Vue application example code based on axios request encapsulation

Solve the problem that MySQL read-write separation causes data not to be selected after insert

Pure js to achieve typewriter effect

6 ways to implement the maximum and minimum values of an array in javascript

Debian virtual machine created by VirtualBox shares files with Windows host

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

Detailed explanation of HTML form elements (Part 2)

Introduction to the use of MySQL pt-slave-restart tool

Three useful codes to make visitors remember your website

mysql implements importing only a specified table from the sql file of exported data

Recommend

Three steps to solve the IE address bar ICON display problem

What are the benefits of using // instead of http:// (adaptive https)

Designing the experience: What’s on the button

A simple method to deal with the tabBar at the bottom of WeChat applet blocking content

js code that associates the button with the enter key

Vue.js handles Icon icons through components

Detailed process of SpringBoot integrating Docker

Analysis of the event loop mechanism of js

Summary of the top ten problems of MySQL index failure

VMware vSphere 6.7 (ESXI 6.7) graphic installation steps

Nginx configuration based on multiple domain names, ports, IP virtual hosts

Briefly describe the four transaction isolation levels of MySql

Automated front-end deployment based on Docker, Nginx and Jenkins

Detailed explanation of MySQL database paradigm

A Brief Analysis of MySQL - MVCC