Home > Article > Web Front-end > Detailed explanation of the frame and rules attributes of tables in HTML
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:
For more detailed articles on the frame and rules attributes of table tables in HTML, please pay attention to the PHP Chinese website!