CSS3.0の各種修飾 - table関連
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> table関連 </title> <style type="text/css"> table { width: 400px; border: 1px solid black; margin:20px; } td { background-color:#ccc; border: 1px solid black; } </style> </head> <body> セルは連結、表タイトルは右<br> border-collapse:collapse;caption-side:right; <table style="border-collapse:collapse;caption-side:right;"> <caption>表タイトル</caption> <tr> <td>セル1-1</td> <td>セル1-2</td> </tr> <tr> <td>セル2-1</td> <td>セル2-2</td> </tr> </table> セルは分割、空セルは非表示<br> border-collapse:seperate;empty-cells:hide; <table style="border-collapse:seperate;empty-cells:hide;"> <tr> <td>セル1-1</td> <td>セル1-2</td> </tr> <tr> <td>セル2-1</td> <td></td> </tr> </table> セルは分割、セル間は20px<br> border-collapse:seperate;border-spacing:20px; <table style="border-collapse:seperate;border-spacing:20px"> <tr> <td>セル1-1</td> <td>セル1-2</td> </tr> <tr> <td>セル2-1</td> <td>セル2-2</td> </tr> </table> </body> </html>
・レイアウトを制御する。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> tableレイアウト</title> <style type="text/css"> table { table-layout: fixed; border-collapse:collapse; border: 1px solid black; margin:10px; } td { background-color:#ccc; border: 1px solid black; } </style> </head> <body> 表幅はcol要素で計算される。 <table> <col style="width:240px"/> <col style="width:80px"/> <tr> <td>セル1-1</td> <td>セル1-2</td> </tr> <tr> <td>セル2-1</td> <td>セル2-2</td> </tr> </table> 表幅は1行目のtd要素で計算される。 <table> <tr> <td style="width:80px">セル1-1</td> <td style="width:300px">セル1-2</td> </tr> <tr> <td>セル2-1セル2-1セル2-1セル2-1セル2-1</td> <td>セル2-2セル2-2セル2-2セル2-2セル2-2セル2-2セル2-2セル2-2</td> </tr> </table> 均等な幅 <table style="width:300px"> <tr> <td>セル1-1</td> <td>セル1-2</td> </tr> <tr> <td>セル2-1</td> <td>セル2-2</td> </tr> </table> </body> </html>