Tips for designing a table with varying rows

I'm attempting to replicate the table shown in the image, but I'm struggling with it and can't grasp the logic behind it.

https://i.sstatic.net/m2GFV.jpg

This is my HTML code:

<table>


<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
            <tr>
                <td></td>
            </tr>
        <tr>
            <td colspan="2">1</td>
            <td>a2</td>
        </tr>
    </tbody>
</table>

If you're able to lend me a hand with this, I would greatly appreciate it.

htmlcsshtml-table

Answer №1

When organizing my data, I utilize the colspan attribute to merge columns in a table. Additionally, I use a nested table structure to split a cell into 3 rows.

.table-inside {
  margin-bottom: 0 !important;
}

.table-inside td {
  padding: 0;
}

.table td {
  text-align: center;
}
<table class="table table-bordered">
  <tbody>
    <tr>
      <td colspan="3">X</td>
    </tr>
    <tr>
      <td colspan="3">X</td>
    </tr>
    <tr>
      <td>Tarih</td>
      <td>X</td>
      <td rowspan="2" class="p-0">
        <table class="table table-bordered table-inside">
          <tbody>
            <tr>
              <td>T</td>
            </tr>
            <tr>
              <td>T</td>
            </tr>
            <tr>
              <td>T</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>Saat</td>
      <td>X</td>
    </tr>
    <tr>
      <td colspan="3">X</td>
    </tr>
  </tbody>
</table>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Answer №2

CSS -

  table {
    width: 100%;
    border-collapse: collapse;
  }
  td {
    border: 1px solid #000;
    padding: 1rem;
  }
  .border-top-hide {
    border-top: 0;
  }
  .border-bottom-hide {
    border-bottom: 0;
  }

HTML -

<table cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3"gt;</td>
  </tr>
  <tr>
    <td rowspan="2">Date</td>
    <td rowspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td class="border-bottom-hide"></td>
  </tr>
  <tr>
    <td rowspan="2">Time</td>
    <td rowspan="2"></td>
    <td class="border-top-hide"></td>
  </tr>
  <tr>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td colspan="3"></td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

having difficulty resolving the problem when utilizing bootstrap classes

I am currently facing two issues with my code. The first one is that the header is not remaining fixed, and the second issue is that word wrapping is not working for the headers/rows. Even though I have used bootstrap classes, these problems persist. I am ...

htmlcsstwitter-bootstraphtml-table

Maneiras de diminuir a margem das páginas utilizando CSS e trocar estilos de observação com um tema diferente

Looking for some assistance with a CSS override on the Remark theme to reduce page side spacing. Any tips? Project: Asp.net Core MVC. Thanks :) Remark image 1 image 2 //Page Code snippet here... ...

htmlcssasp.net-mvclayout

Tips for customizing bootstrap cards to display on a single row with four columns

I've been working on my Angular application and I'm using a Bootstrap card to display some information. Unfortunately, I can't seem to get the design to look how I want it to, even after trying multiple approaches. The component.html code ...

cssangulartwitter-bootstrapbootstrap-4

Is there a way to control the quantity of items that can be dragged to the drop area with dragula?

I'm struggling with a drag-and-drop issue that involves limiting the number of elements in a drop-area to two. I am using the dragula library for this task: If there are fewer than two elements in the drop-area, allow adding a new element from the dr ...

javascripthtmlcssdragula

Transferring the selected radio button from one HTML page to another without using PHP

I'm looking to transfer radio button data from the first HTML to the second using Pure JavaScript Feel free to use jQuery if needed. jQuery was used 1st HTML <body> <label for="1"> <input type="radio" name="num" id="1" checked="che ...

javascripthtmljquery

Adding DIV elements within a Bootstrap Carousel

I've successfully placed containers inside my Bootstrap Carousel slides that overlay the image with text and a link. It looks great initially, but I'm facing an issue where after switching to the next slide, I can't return to the one with th ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is the technique to achieve a seamless blur effect?

Is there a way to create a smooth blur similar to a gradient transitioning from transparent to dark? .img { background: url(https://4kwallpapers.com/images/walls/thumbs_2t/13551.jpg); background-size: cover; background-position: center; width: 5 ...

htmlcss

The background of the webpage section is being cropped on mobile devices

Currently, I am delving into the creation of a website completely from scratch to serve as an online CV for networking and job/school applications. My journey with HTML and CSS is relatively fresh, having started only about 5 months ago. Overall, things ha ...

htmlcssmobile

Implement responsive data tables by setting a specific class for hiding columns

Having trouble assigning a specific class name to individual columns in datatables? It seems that when columns are hidden using the responsive extension, the desired class is not applied. Looking for a solution or workaround. Check out this example from D ...

javascriptjqueryhtmlcssdatatables

Administer styles to individual Angular Material components using external CSS files

I am attempting to customize a specific mat input element in my application using an external CSS file. For instance, I have imported textfield.css and style.css files for this purpose. Let me provide some code snippets below: <mat-form-field> ...

cssangularangular-material

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...

javascriptjqueryhtmlcss

Challenges with setting WIDTH and HEIGHT percentages in a DIV using CSS (firefox fails to properly render)

My mind is swirling with thoughts about this particular issue, and I am reaching out to share my frustration in the hopes of connecting with someone who has faced a similar experience and perhaps found a solution. Here's the situation: http://jsfidd ...

firefoxcssheightwidthcentering

"Encountering a 404 error while attempting to forward to an HTML

I've been encountering an issue while trying to transition from a JSX page to an HTML page. Every time I attempt to do so, I receive a 404 error stating that the page doesn't exist. It's puzzling because it is clearly present in my files and ...

javascripthtmlreactjsnext.js

Setting up a textarea tooltip using highlighter.js

I'm experimenting with using highlighter.js within a textarea. I've customized their sample by substituting the p with a textarea enclosed in a pre tag (for right-to-left language settings). <div class="article" style="width: 80%; height: 80% ...

javascriptjqueryhtmltooltip

The addition and deletion of classes can sometimes lead to disruptions in the DOM

I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasional ...

javascriptjqueryhtmlcssdom

Stop the button from changing size as the icon transitions

Currently, my button appears to increase in size during the transition. I am aiming for the arrow to move from left to right without the actual button resizing. Check out the code on JSFiddle. I attempted using max-width: 100% on the button but found that ...

htmlcssbootstrap-4

What is the best way to link styleUrls to a CSS file located in a different directory?

I am trying to include the CSS file src/app/shared/layouts/admin/admin.component.css in my component located at src/app/admin/create-company/create-company.component.ts How can I properly reference this css file in the styleUrls of create-company.componen ...

cssangularstyles

Exploring the use of ASP:Label, <span>, and accessing elements by their ID

Attempting to access a control within a specific class has been challenging for me. HTML Code: <span class="GeoPanelHeaderLeft"> <asp:Literal ID="LiteralHeaderText" runat="server" Text="New Survey Ticket"></asp:Literal> & ...

c#asp.nethtmlgetelementbyid

What steps should I take to trigger a notification when no selection has been made?

When the product size is not set, the text "Must pick 1 size for the product" should be displayed. However, I am facing an issue with displaying this text. Can someone guide me on how to properly use the select and input elements? <select name="product ...

cssvalidationinput

using jquery, how can you send multiple parameters in an ajax request

Hello and welcome! I'm having trouble passing parameters through an ajax URL. I am attempting to send multiple data using the jQuery $.ajax method to my PHP script, but I can only pass a single data item when concatenating multiple data entries toget ...

javascriptphpjquerycssajax