HTML tables and rowspan and colspan behavior - html

I'm working on this assignment and pretty much everything works fine, but I can't understand why the top cell does not occupy the entire space.
Also, it'd be really useful to know if I can format cells (size and such).
Here's the code.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th colspan="4">Notas de HTML</th>
<tr>
<td colspan="2">Alumno</td>
<td colspan="2">Conceptos (60%)</td>
<td colspan="3">Procedimiento (30%)</td>
<td rowspan="2">Actitud (10%)</td>
</tr>
<tr>
<td>Apellidos</td>
<td>Nombre</td>
<td>Examen teórico</td>
<td>Examen práctico</td>
<td>Práctica 1</td>
<td>Práctica 2</td>
<td>Práctica 3</td>
</tr>
<tr>
<td>ape1</td>
<td>nom1</td>
<td>7</td>
<td>6.5</td>
<td>8</td>
<td>4</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>ape2</td>
<td>nom2</td>
<td>5</td>
<td>4</td>
<td>6</td>
<td>4</td>
<td>5</td>
<td>7</td>
</tr>
</tr>
</table>
</body>


To span all eight columns you need to use this:
<th colspan="8">Notas de HTML</th>
jsFiddle example
And by using CSS you can format cells however you like.

Related

HTML CSS Table Design Guidance

I am trying to create this type of table or design in HTML/CSS/PHP.
In each block, there will be 3 variables. One with horizontal orientation in center and two with vertical orientation in either direction of a center variable.
I have tried to replicate this by using HTML tables but not getting proper results. This is what I have managed to get.
I already did the programming to configure variables and putting them where they should be with orientation but kind of stuck at proper UI. Kindly help me to design this.

Adding in HTML :
<table style="width:400px">
<tr>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
Adding in css:
th, td {
padding: 15px;
}
Solve It :)
Good luck !!!

HTML - Table Cell Sizes

enter code hereFairly new to this and doing my first HTML project. In it I have to create a table, which I have managed to do fine. However, it isn't exactly the same. Here's what I have:
<table>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4:47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3:10</td>
</tr>
<tr>
<td>3</td>
<td>Night</td>
<td>3:00</td>
</tr>
<tr>
<td>4</td>
<td>Backstreet</td>
<td>6:29</td>
</tr>
<tr>
<td>5</td>
<td>Born To Run</td>
<td>4:29</td>
</tr>
<tr>
<td>6</td>
<td>She's The One</td>
<td>4:29</td>
</tr>
<tr>
<td>7</td>
<td>Meeting Across The River</td>
<td>3:15</td>
</tr>
<tr>
<td>8</td>
<td>Jungleland</td>
<td>9:33</td>
</tr>
</table>
It is supposed to look like this
How do I get the track listing numbers to sit so tightly in that cell? I've tried colspan and rowspan and can't get it to sit that comfortably.
Also, I have not inlcluded the table headers in my HTML above but I do have it. There are 2 table headers, yet 3 columns underneath the header. How do I get it all to sit together nicely as in the picture I linked, and not like mine?
Thanks!

Ok I see. You need the HTML as it is bellow:
<table border="1">
<tr>
<td colspan="2">Bruce Springsteen<br>Born To Run</td>
<td><img src="https://upload.wikimedia.org/wikipedia/en/7/7a/Born_to_Run_(Front_Cover).jpg"></td>
</tr>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4:47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3:10</td>
</tr>
<tr>
<td>3</td>
<td>Night</td>
<td>3:00</td>
</tr>
<tr>
<td>4</td>
<td>Backstreet</td>
<td>6:29</td>
</tr>
<tr>
<td>5</td>
<td>Born To Run</td>
<td>4:29</td>
</tr>
<tr>
<td>6</td>
<td>She's The One</td>
<td>4:29</td>
</tr>
<tr>
<td>7</td>
<td>Meeting Across The River</td>
<td>3:15</td>
</tr>
<tr>
<td>8</td>
<td>Jungleland</td>
<td>9:33</td>
</tr>
</table>
You can also test it on this JSFiddle.
The key was to add colspan="2" on the <td> that writes "Bruce Springsteen...", which means that this cell will take the place of 2 columns.
Hope this helped you. If it helped you you can accept and upvote my answer. Thanks !

Static Header and First Columns in a Table

I have a large table, that when scrolling the header and first columns in rows are static and should not move. I would like to solve this with only the CSS. The problem is, that the tables cells are dynamic, so you don’t know what will the width/height be.
<table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
…
</tr>
</thead>
<tbody>
<tr>
<td class=”static”>First</td>
<td class=”static”>Second</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
…
</tr>
….
</tbody>
</table>

Table within a table

I'm writing a code for the following table (I have to use table inside table)
Here is my code :
<html>
<body>
<table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</table>
</body>
</html>
But in browser I'm getting something different, looking like this :
I'm very beginner with HTML, I'm trying to understand how tables within tables work mostly by doing exercises for that.

This can be accomplished with one table:
HTML
<table border=1 >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td rowspan=2>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
JS Fiddle: http://jsfiddle.net/HcRW3/

your rowspan in the 3rd row can't work as the table has only one row. It doesn't know anything about the outside table.
I really can't understand why you have to go with table in table, but if you must, the outer table can only have 3 rows and the 3rd nested table has two rows.

May well work better for you:
<html>
<body>
<table border="1" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td style="border-bottom: none;">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td style="border-top: none;"></td>
<td>17</td>
</tr>
</table>
</body>
</html>

This is not an answer, but just an extension to my comment, to explain the result.
table is not a valid child of tr, only th and td are valid as child of tr.
For most browsers the behavior if they detect an invalide child inside of an element is, to move the child after that element. This is repeated until the structure is valid.
Because table is neither a valid child of tr nor of table the innter tables are all moved outside of the surrounding table. The resulting structure the browsers most likely creates out of your original code of the question:
<table>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</tr>
</table>
would then be:
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>

May I advise you use colspan and Rowspan instead of tables inside tables it much easier and how I do most of my tables which require cells to be merged.
You can find an example of colspan here:
http://www.w3schools.com/tags/att_td_colspan.asp
and an example of rowspan:
http://www.w3schools.com/tags/att_td_rowspan.asp
Here is an example of the code to do this:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td >3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td >11</td>
<td rowspan="2">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td >15</td>
<td >16</td>
<td>17</td>
</tr>
</table>

I'm pretty sure you should be able to do this in one table. Like this,
<table border=1 cellspacing=0>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=3>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<tdrowspan=2>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>

You should try not to put a table inside a table. "Rowspan" and "colspan" are a good idea. You'd probably want to use 'valign' top (vertical align) to make sure the 12 stays on the same level as the row.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td rowspan="2" valign="top">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>

Table with 3 headers, how to have different number of row cell?

I want to achieve this table structure
a | b | c
1 | 1 | 1
2 | 2 | 2
3 | 3 | 3
| | 4
I have this code but it puts the 4 in another column instead of underneath the 3
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

You will have to make some empty cells, the row with the '4' in it, is a new row:
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4</td>
</tr>
</table>

<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
</table>

This is normal : in your table header, you defined three different headers, thus three different columns. Since <td></td> defines a column in a table, your '4' gets its own column which is not defined by the column headers of the table.
In order to let the 4 go underneath the 3, you should make a new table row with the last containing 4, like this :
<table border="0">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td></td>
<td>4</td>
</tr>
</table>

As analternative to the toher answers that add a new row, if you want the 4 to be in the same table cell as the 3, just add a line break inside the table cell
...
<tr>
<td>1</td>
<td>2</td>
<td>3<br/>4</td>
</tr>
</table>
or use div tags in the cell like this
...
<tr>
<td>1</td>
<td>2</td>
<td>
<div>3</div>
<div>4</div>
</td>
</tr>
</table>