Hello, guys in this tutorial we will learn how to split tables using HTML & CSS.
HTML Tables
HTML tables allow web developers to arrange data in rows and columns.
| Company | Contact | City |
| 010002145 | New York | |
| Microsoft | 012365800 | California |
The <table> the tag defines an HTML table Code.
Each <tr> tag use for table row.
Each <th>
Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
How to split table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<table class="table-bordered">
<col>
<col>
<col>
<colgroup span="4"></colgroup>
<col>
<tr>
<th rowspan="2" style="vertical-align : middle;text-align:center;">S.No.</th>
<th rowspan="2" style="vertical-align : middle;text-align:center;">Item</th>
<th rowspan="2" style="vertical-align : middle;text-align:center;">Description</th>
<th colspan="3" style="vertical-align : middle;text-align:center; width: 50%;">Items</th>
<th rowspan="2" style="vertical-align : middle;text-align:center;">Rejected Reason</th>
</tr>
<tr>
<th scope="col">Order</th>
<th scope="col">Received</th>
<th scope="col">Accepted</th>
</tr>
<tr>
<th>1</th>
<td>Watch</td>
<td>Analog</td>
<td>100</td>
<td>15</td>
<td>25</td>
<td>Not Functioning</td>
</tr>
<tr>
<th>2</th>
<td>Pendrive</td>
<td>16GB</td>
<td>25</td>
<td>16</td>
<td>85</td>
<td>Not Working</td>
</tr>
</table>
</body>
</html>if you want to break a word in a table or want to split the table in CSS. you can use the above code.
Wow this is cool ?