0

I'm creating a Table like this, but when I write the HTML, how can I write it in vertical groups (days of the week) instead of horizontal groups (numbers)?

I would appreciate it if you could tell me more about it.

a {
  display: block;
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse;
}

.table td,
th {
  border: solid 1px;
  padding: 0.5em;
  background: #ffffff;
  width: 80px;
}

.table.td.table {
  border-color: #ffffff;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

</head>

<body>
  <table class="table">
    <tr>
      <td></td>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>

    <tr>
      <th>1</th>
      <td>
        <p>Content</p>
      </td>
      <td>
        <p>Content</p>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>3</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>5</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>6</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

The ideal is shown below. I would like to write each day of the week instead of a number.

enter image description here

m4n0
  • 29,823
  • 27
  • 76
  • 89
space_pok
  • 179
  • 11
  • whats your intention? What you try wont work with tables way. You proberly better off with CSS-Grid. Also it does not seem you want to use a table for tabular data but styling puprose. Espacially if you use a paragraph inside a table cell, it indicates that you're not up for tabular data. – tacoshy Apr 07 '21 at 13:20
  • I would really like to use a Grid, but since I have to change the CSS every time I add more numbers or days dynamically in React, I tried to use a Table. Is there any way to create the best Grid CSS for dynamically adding numbers and days of the week automatically? – space_pok Apr 07 '21 at 13:23

1 Answers1

1

AFAIK there is no inbuilt way that you can do this (write in column rather than row order) in HTML.

However, what you could do is write your timetable in rows - so Monday is a row, Tuesday is a row etc - thus giving you the ability to group things in the way you want.

You can then transpose the table using Javascript at run-time.

This snippet takes code given by @johnvkumpf dated 22Feb (2021) in How to invert (transpose) the rows and columns of an HTML table? plus your original table but rewritten to have the days as rows.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
a {
  display: block;
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse;
}

.table td,
th {
  border: solid 1px;
  padding: 0.5em;
  background: #ffffff;
  width: 80px;
}

.table.td.table {
  border-color: #ffffff;
}
</style>
</head>

<body>
<p><a href="#" id="transposButton">Click me to transpose the table</a></p>
  <table class="table">
    <tr>
      <td></td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>

    <tr>
      <th>Monday</th>
      <td>
        <p>Content</p>
      </td>
      <td>
        <p>Content</p>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Wednesday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Thursday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Friday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Saturday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <script>
  $("a#transposButton").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(rowToColIndex){
            $(this).find("td, th").each(function(colToRowIndex){
                if(newrows[colToRowIndex] === undefined) { newrows[colToRowIndex] = $("<tr></tr>"); }
                while(newrows[colToRowIndex].find("td, th").length < rowToColIndex){
                    newrows[colToRowIndex].append($("<td></td>"));
                }
                newrows[colToRowIndex].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
    
    return false;
});
</script>

https://stackoverflow.com/questions/66986623/i-want-to-change-the-table-from-a-horizontal-group-to-a-vertical-group
http://jsfiddle.net/xsp4eqwz/2/
</body>

</html>
A Haworth
  • 30,908
  • 4
  • 11
  • 14