DEV Community

Cover image for How to split table in CSS?

Posted on • Updated on


How to split table in CSS?

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.

The <table> the tag defines an HTML table Code.
Each <tr> tag use for table row.
Each <th> tag use for table header.
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">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Table </title>
      <link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <table class="table-bordered">
         <colgroup span="4"></colgroup>
            <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>
            <th scope="col">Order</th>
            <th scope="col">Received</th>
            <th scope="col">Accepted</th>
            <td>Not Functioning</td>
            <td>Not Working</td>
Enter fullscreen mode Exit fullscreen mode

if you want to break a word in a table or want to split the table in CSS. you can use the above code.

Top comments (0)

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content