Fri. Jun 2nd, 2023

[ANSWERED] Table Html 5 th td issues

By

Nov 20, 2022 html, html-table

Solution 1 :

A few of your <tr>s were nested inside eachother, after correcting that (which I’ve done for you below), you can accomplish the half columns by multiplying every single cell by 2 and treating the other cells normally. Read this for more info on how to do that.

EDIT: I actually just ended up writing the whole thing to spite someone, here:

table{
  border-collapse: collapse;
}

th, td{
  border: 1px solid black;
  padding: 4px;
}

<table>
  <tr>
    <th rowspan = "3">
      Day
    </th>
    <th colspan = "3">
      Seminar
    </th>
  </tr>
  <tr>
    <th colspan="2">
      Schedule
    </th>
    <th colspan = "2" rowspan="2">
      Topic
    </th>
  </tr>
  <tr>
    <th>
      Begin
    </th>
    <th>
      End
    </th>
  </tr>
  <!-- table body code -->
  <tr>
    <td rowspan="2">
      Monday
    </td>
    <td rowspan="2">
      8:00 am
    </td>
    <td rowspan="2">
      5:00 pm
    </td>
    <td>
      Introduction to XML
    </td>
  </tr>
  <tr>
    <td>
      Validity: DTD and Relax NG
    </td>
  </tr>
  <tr>
    <td rowspan="6">
      Tuesday
    </td>
    <td rowspan = "2">
      8:00 am
    </td>
    <td rowspan = "2">
      11:00 am
    </td>
    <td rowspan = "3">
      XPath
    </td>
  </tr>
  <tr>
  </tr>
  <tr>
    <td rowspan= "2">
      11:00 am
    </td>
    <td rowspan= "2">
      2:00 pm
    </td>
  </tr>
  <tr>
    <td rowspan= "3">
      XSL Transformations
    </td>
  </tr>
  <tr>
    <td rowspan= "2">
      2:00pm
    </td>
    <td rowspan= "2">
      5:00pm
    </td>
  </tr>
  <tr>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>8:00 am</td>
    <td>12:00 pm</td>
    <td>XSL Formatting Objects</td>
  </tr>
</table>

Solution 2 :

Here’s what I could do:

<table border="1px solid">
    <thead>
       <tr>
           <th rowspan="3">Day</th>
           <th colspan="3">Seminar</th>
       </tr>
       <tr>
           <th colspan="2">Shcedule</th>
           <th rowspan="2">Topic</th>
           <tr>
            <th>Begin</th>
            <th>End</th>
           </tr>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Monday</td>
            <td rowspan="2">8:00 am</td>
            <td rowspan="2">5:00 pm</td>
            <td>Introduction to XML</td>
       </tr>
       <tr>
         <td>Validity:DTD and Relax NG</td>
       </tr>
       <tr>
          <td rowspan="3">Tuesday</td>
          <td>8:00 am</td>
          <td>11:00 am</td>
          <td>XPath</td>
          <tr>
            <td>11:00 am</td>
            <td>2:00 pm</td>
          </tr>
          <tr>
            <td>2:00 pm</td>
            <td>5:00 pm</td>
            <td>XSL Transformations</td>
          </tr>
       </tr>
       <tr>
          <td>Wednesday</td>
          <td>8:00 am</td>
          <td>12:00 pm</td>
          <td>XLS Formating Objects</td>
        </tr>
    </tbody>
</table>

Not sure if 1.5 cells are possible (probably want to fix those times anyway because it’s vague now).

Problem :

I am trying to make a table like in the sample but i am having a hard time to make it look like in the sample.I can not place the “Introducing to XML”,”Validity:DTD and Relax NG” and the rest. i need help to place them on top of each other.

<body>
  <div>
    <table border="1px solid">
      <thead>
        <tr>
          <th rowspan="3">Day</th>
          <th colspan="3">Seminar</th>
        </tr>
        <tr>
          <th colspan="2">Shcedule</th>
          <th rowspan="2">Topic</th>
          <tr>
            <th>Begin</th>
            <th>End</th>
          </tr>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Monday</td>
          <td>8:00 am</td>
          <td>5:00 pm</td>
          <td rowspan="2">Introduction to XML</td>
        </tr>
        <tr>
          <td rowspan="3">Tuesday</td>
          <td>8:00 am</td>
          <td>11:00 am</td>
          <tr>
            <td>11:00 am</td>
            <td>2:00 pm</td>
          </tr>
          <tr>
            <td>2:00 pm</td>
            <td>5:00 pm</td>
            <td>XSL Transformations</td>
          </tr>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Wednesday</td>
          <td>8:00 am</td>
          <td>12:00 pm</td>
          <td>XLS Formating Objects</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>

Comments

Comment posted by Rob

Your HTML is invalid. Fix that first.

By

Related Post

[ANSWERED] html – Child div has an offset border

Nov 20, 2022

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022