[英]how to make table in html using rowspan and colspan?
How to build this table in html??如何在 html 中建立这个表?
I want to make table using rowspan and colspan?我想使用 rowspan 和 colspan 制作表格?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <table class="table table-bordered"> <thead> <th>Subject</th> <th>Result</th> </thead> <tbody> <tr> <td>Science</td> <td>Physics</td> <td>Chemistry</td> <td>Other Science</td> <td>Math</td> <td>English</td> </tr> </tbody> </table>
You can learn about <table>
tags at MDN You can do this:你可以在MDN了解
<table>
标签你可以这样做:
table, th, td { border: 1px solid black; border-collapse: collapse; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <table class="table table-bordered"> <thead> <tr> <th colspan="2">Subject</th> <th>Result</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Science</td> <td>Physics</td> <td>A</td> </tr> <tr> <td>Chemistry</td> <td>A</td> </tr> <tr> <td rowspan="2">Other Science</td> <td>Biology</td> <td>B</td> </tr> <tr> <td>Geography</td> <td>A</td> </tr> <tr> <td colspan="2">Math</td> <td>A+</td> </tr> <tr> <td colspan="2">English</td> <td>A+</td> </tr> </tbody> </table>
This is set-up with colspan
and rowspan
这是用
colspan
和rowspan
设置的
table { border-collapse: collapse; } table, tr, th, td { border: 1px solid #000; } th { padding: 1ex; background: #ccc; } td { padding: 1ex; }.divide td { border-top: 3px solid; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <table class="table table-bordered"> <thead> <th colspan="2">Subject</th> <th>Result</th> </thead> <tbody> <tr> <td rowspan="2" colspan="1" width="100px"> SCIENCE </td> <td> Physics </td> <td>A</td> </tr> <tr> <td> <span>Chemistry</span> </td> <td colspan="1">A</td> </tr> <tr> <td rowspan="2" colspan="1" width="100px"> SCIENCE </td> <td> Physics </td> <td>A</td> </tr> <tr> <td> <span>Chemistry</span> </td> <td colspan="1">A</td> </tr> <tr> <td colspan="2"> SCIENCE </td> <td>A</td> </tr> <tr> <td colspan="2"> SCIENCE </td> <td>A</td> </tr> </tbody> </table> <br> <br> <table> <tr> <th>head</th> <th>title</th> <th>title</th> <th>title</th> <th></th> </tr> <tr> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td rowspan="2">white</td> </tr> <tr> <td colspan="4"> lorem ipsum </td> </tr> <tr class="divide"> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td rowspan="2">gray</td> </tr> <tr> <td colspan="4"> lorem ipsum </td> </tr> <tr class="divide"> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td>white</td> </tr> <tr class="divide"> <td> <input type="checkbox"> </td> <td>content</td> <td>content</td> <td>content</td> <td rowspan="2">gray</td> </tr> <tr> <td colspan="4"> lorem ipsum </td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.