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

Complete step record of Vue encapsulation of general table components

Table of contents Preface Why do we need to encap...

Detailed introduction to nobody user and nologin in Unix/Linux system

What is the nobody user in Unix/Linux systems? 1....

Detailed explanation of the idea of ​​using mysqldump+expect+crontab to implement mysql periodic cold backup in linux

Table of contents 1. Problems encountered 2. Idea...

Vue implements the method of displaying percentage of echart pie chart legend

This article mainly introduces the pie chart data...

Build a Docker private warehouse (self-signed method)

In order to centrally manage the images we create...

WeChat Mini Program uses simultaneous interpretation to implement speech recognition

I use the simultaneous interpretation voice recog...

Import CSS files using judgment conditions

Solution 1: Use conditional import in HTML docume...

Tutorial on how to modify the IP address of a Linux virtual machine, check the gateway, and configure the network environment

Modify the IP address of the virtual machine: Ent...

Detailed explanation of type protection in TypeScript

Table of contents Overview Type Assertions in syn...

Example analysis of the use of GROUP_CONCAT in MySQL

This article uses an example to describe how to u...

A simple tutorial on how to use the mysql log system

Table of contents Preface 1. Error log 2. Binary ...

About MariaDB database in Linux

Table of contents About MariaDB database in Linux...

How to Find the Execution Time of a Command or Process in Linux

On Unix-like systems, you may know when a command...

Detailed explanation of execution context and call stack in JavaScript

Table of contents 1. What is the execution contex...

How to set up automatic daily database backup in Linux

This article takes Centos7.6 system and Oracle11g...