如何使用 rowspan 和 colspan 在 html 中制作表格？

Question

如何在 html 中建立這個表？

我想使用 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>

Answer 1

你可以在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>

Answer 2

這是用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>