html绘制表格边框,绘制HTML表格边框

我想在HTML页面上绘制表格的边框:

HTML:

Dimension in CM

Weight in KG

Volume

(x6)

Pallet

(x6)

Master

(x6)

Inner

(x6)

CSS:

.drawBorder table

{

border: 0 solid Black;

border-spacing: 0;

margin-top: 30px;

border-collapse: collapse;

}

.drawBorder th, .drawBorder td

{

border: 1px solid Black;

width: 80px;

}

.rowHeader

{

background-color: #f4e8d0;

font-weight: bold;

}

.columnHeader

{

text-align: center;

background-color: #f4e8d0;

border: 1px solid Black;

font-weight: bold;

}

IE上的结果:

H7I9o.png

Chrome上的结果:

ZtVd0.png

所以...两个问题:

为什么IE在我的第一行没有ColSpan?

为什么border-collapse: collapse;不起作用?

(我不会写完整的HTML代码,因为我无法发布大部分代码消息......)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 下面是一个简单的 HTML 表格示例: ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>小明</td> <td>25</td> <td>北京</td> </tr> <tr> <td>小红</td> <td>30</td> <td>上海</td> </tr> </table> ``` 这个表格有三列,分别是 "姓名"、"年龄" 和 "城市"。第一行是表头,使用 `<th>` 元素来定义。第二行和第三行是数据行,使用 `<td>` 元素来定义。 上面的代码将生成一个包含两行数据的表格,如下所示: | 姓名 | 年龄 | 城市 | | --- | --- | --- | | 小明 | 25 | 北京 | | 小红 | 30 | 上海 | ### 回答2: 要使用HTML绘制一个表格,我们需要使用<table> 元素。 下面是一个使用HTML绘制一个简单表格的示例: ```html <!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; } table, th, td { border: 1px solid black; } th, td { padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style> </head> <body> <h2>示例表格</h2> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> <tr> <td>王五</td> <td>35</td> <td>男</td> </tr> </table> </body> </html> ``` 在上面的代码中,<table> 标签用来定义表格的开始和结束。每行使用 <tr> 标签定义,</tr> 用来结束当前行。每个单元格使用 <td> 标签定义,</td> 用来结束当前单元格。 使用 CSS 可以对表格进行样式化。在示例中,我们定义了表格的宽度、边框样式、单元格内容的对齐方式、表头的背景色等。 绘制表格的过程中可以添加更多的行或列,根据需要设置不同的样式。 注意,以上只是一个简单的示例,根据具体需求可以进行更多复杂的表格设计。 ### 回答3: 要使用HTML绘制一个表格,我们可以使用<table>标签来定义表格的开始和结束。在<table>标签之间,我们可以使用<tr>标签定义表格的行,并使用<td>标签定义表格的单元格。 以下是一个简单的示例,演示如何使用HTML绘制一个具有3行3列的表格: ``` <!DOCTYPE html> <html> <head> <title>绘制表格</title> </head> <body> <table> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td> </tr> <tr> <td>单元格7</td> <td>单元格8</td> <td>单元格9</td> </tr> </table> </body> </html> ``` 在以上示例中,我们使用了``<table>``标签来定义表格,``<tr>``标签来定义表格的行,以及``<td>``标签来定义表格的单元格。每一行被定义在``<tr>``标签之间,而每个单元格则被定义在``<td>``标签之间。试着将以上代码复制到HTML文档中,你将看到一个简单的3行3列的表格显示在你的浏览器中。根据需要,可以调整行数和列数,或者增加其他HTML元素来装饰你的表格
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值