Home > Article > Web Front-end > How to use the caption-side attribute
The caption-side attribute is used to set the position of the table title. You can set whether the table title is located above or below the table.
CSS caption-side property
Function: caption-side property Set the position of the table title.
Syntax:
caption-side: top|bottom;
Parameters:
top: Default value, position the table title above the table.
bottom: Position the table title below the table.
Note: All mainstream browsers support the caption-side attribute; but IE8 only supports the caption-side attribute if !DOCTYPE is specified.
Usage example of CSS caption-side attribute
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> td{ padding:10px 20px; } #example1 { caption-side: bottom; } #example2 { caption-side: top; } </style> </head> <body> <h2>caption-side: bottom:</h2> <table id="example1" border="1"> <caption>标题</caption> <tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr> <tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr><tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr><tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr><tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr> </table> <h2>caption-side: top (默认值):</h2> <table id="example2" border="1"> <caption>标题2</caption> <tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr> <tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr><tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr><tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr><tr> <td>测试文本</td> <td>测试文本</td> <td>测试文本</td> </tr> </table> </body> </html>
Rendering:
The above is the detailed content of How to use the caption-side attribute. For more information, please follow other related articles on the PHP Chinese website!