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

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
  1. < table   border = "1"   width = "600"   frame = "hsides"   rules = "groups" >   
  2.       < caption > My Ultimate Table </ caption >   
  3.       < colgroup   span = "1"   width = "200" > </ colgroup >   
  4.       < colgroup   span = "3"   width = "400" > </ colgroup >   
  5.   
  6. < thead >   
  7.       < tr >   
  8.            < td > cell 1-1 </ td >   
  9.            < td > cell 1-2 </ td >   
  10.            < td > cell 1-3 </ td >   
  11.            < td > cell 1-4 </ td >   
  12.       </ tr >   
  13. </ thead >   
  14. < tfoot >   
  15.       < tr >   
  16.            < td > cell 4-1 </ td >   
  17.            < td > cell 4-2 </ td >   
  18.            < td > cell 4-3 </ td >   
  19.            < td > cell 4-4 </ td >   
  20.       </ tr >   
  21. </ tfoot >   
  22. < tbody >   
  23.       < tr >   
  24.            < td > cell 2-1 </ td >   
  25.            < td > cell 2-2 </ td >   
  26.            < td > cell 2-3 </ td >   
  27.            < td > cell 2-4 </ td >   
  28.       </ tr >   
  29.       < tr >   
  30.            < td > cell 3-1 </ td >   
  31.            < td > cell 3-2 </ td >   
  32.            < td > cell 3-3 </ td >   
  33.            < td > cell 3-4 </ td >   
  34.       </ tr >   
  35. </ tbody >   
  36. </ 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)

Recommend

Page Refactoring Skills - Javascript, CSS

About JS, CSS CSS: Stylesheet at the top Avoid CS...

Design of pop-up windows and floating layers in web design

In the trend of gradual transition from tradition...

Detailed explanation of vuex persistence in practical application of vue

Table of contents vuex persistence Summarize vuex...

Detailed explanation of calculated properties, monitoring properties and life cycle in Vue.js

Table of contents Preface Computed properties Int...

How to simply configure multiple servers in nginx

1: I won’t go into the details of how to install ...

How to install Docker on Raspberry Pi

Because the Raspberry Pi is based on ARM architec...

The docker container directly runs to obtain the public IP operation through ping

Get the local public IP address through the conta...

Eight common SQL usage examples in MySQL

Preface MySQL continued to maintain its strong gr...

How familiar are you with pure HTML tags?

The following HTML tags basically include all exis...

Optimized implementation of count() for large MySQL tables

The following is my judgment based on the data st...

Zabbix monitors Linux hosts based on snmp

Preface: The Linux host is relatively easy to han...

SQL insert into statement writing method explanation

Method 1: INSERT INTO t1(field1,field2) VALUE(v00...

MySQL 5.7.17 installation and configuration graphic tutorial

The blogger said : I have been writing a series o...

MySQL cursor functions and usage

Table of contents definition The role of the curs...

Detailed explanation of how to use the mysql backup script mysqldump

This article shares the MySQL backup script for y...