首页html表格制作横向

html表格制作横向

时间: 2024-09-05 20:00:23 浏览: 60

HTML表格的制作通常通过`<table>`标签开始，如果你想创建一个横向的表格，也就是列宽大于行高，你可以通过调整`width`属性来控制列宽度，并利用CSS进一步精细化布局。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> table { border-collapse: collapse; /* 合并边框 */ width: 100%; /* 表格宽度设为100%，使其自适应页面宽度 */ } th, td { text-align: center; /* 居中文本 */ padding: 8px; /* 内边距增加美观 */ border: 1px solid #ddd; /* 边框样式 */ } /* 水平方向上调整单元格宽度，比如将第一列设置为固定宽度 */ th:first-child, td:first-child { width: 50%; /* 将第一列设为总宽度的一半 */ } </style> </head> <body> <table> <tr> <th>标题1</th> <th>标题2</th>  </tr> <tr> <td>内容1</td> <td>内容2</td>  </tr> </table> </body> </html> ``` 在这个示例中，我们设置了第一列的宽度占表格总宽度的50%来达到横向的效果。当然，你可以根据实际需要调整各列的宽度。

阅读全文