Home  >  Article  >  Web Front-end  >  Detailed explanation of the frame and rules attributes of tables in HTML

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

高洛峰
高洛峰Original
2017-02-17 16:02:113123browse

On the Web page, we can use frame and rules to control whether the table border is visible. Let's explain in detail the frame and rules attributes of the table table in HTML. Friends in need can refer to the

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


Code example:

<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>

is displayed in the browser as follows:
Detailed explanation of the frame and rules attributes of tables in HTML

For more detailed articles on the frame and rules attributes of table tables in HTML, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn