我们可以使用 css 定义表格的样式。以下属性通常用于设置
及其元素的样式 -bordercss border 属性用于定义边框-width、border-style 和 border-color。
border-collapse此属性用于指定
元素是否应具有共享或单独的边框。captioncaption-side 属性用于垂直定位表格标题框。
empty-cells此属性用于指定表格中空单元格的显示。
table-layout strong>定义浏览器用于布置表格的行、列和单元格的算法。
示例以下示例说明了表格的样式 -
实时演示
<!doctype html><html><head><style>table, table * { border: thin solid; padding: 5px; font-style: italic;}caption { caption-side: bottom;}td { box-shadow: inset 0 0 6px green;}</style></head><body><table><caption>demo caption</caption><tr><td>demo</td></tr><tr><td>demo</td><td></td></tr><tr><td>demo</td><td>demo</td><td></td></tr></table></body></html>
输出这给出了以下输出 -
示例 现场演示
<!doctype html><html><head><style>div { display: flex; float: left;}table { border: 3px solid black;}td { border: 3px solid lightgreen;}th { border: 3px solid lightblue;}#t2 { border-collapse: collapse;}</style></head><body><h2>team rankings</h2><div><table id="t1"><tr><th>team (test)</th><th>rank </th></tr><tr><td>india </td><td>1 </td></tr><tr><td>australia</td><td>2</td></tr></table> </div><div><table id="t2"><tr><th>team (odi) </th><th>rank </th></tr><tr><td>india </td><td>1 </td></tr><tr><td>england</td><td>2</td></tr></table></div></body></html>
输出这给出了以下输出 -
以上就是样式表的基本 css 属性的详细内容。