The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Creating Tables in HTML
iBurgg
post Sep 23 2021, 07:00 PM
Post #1





Group: Members
Posts: 1
Joined: 23-September 21
Member No.: 28,110



Hi HTML community, I am looking for help. My professor assigned hw for us to use html to create 2 tables. She has us using <table> <tr> <td> tags and asks us to use "rowspan", "colspan", "align", "width", "cellspacing", and "cellpadding" tags or elements to create 2 tables. These are the 2 tables:

The tables I need to make

I've tried but I really cannot create these tables the best I can get to for the first table is this-

"<table cellpadding="10" border="1" width="50%" >

<tr><td >A</td><td>B</td><td>C</td><td>D</td></tr> <tr><td rowspan="2">E</td><td align="middle" colspan="2">F</td><td>G</td></tr> <tr ><td align="middle" colspan="3">H</td> </tr>"

results of the code I have


Please any and all help will be greatly appreciated! What do I need to change in orderto get the correct spacing inside E and H cells without changing the rest?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 24 2021, 04:46 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, you've got the col- and rowspans a litte wrong there.

This can be tricky before you get your head around it. One thing I thought made it easier when I learnt to do it was to create a full table with all the cells still there to start with. You would need a 4 cols 3 rows table.

CODE
<table>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>


Then you take it row by row.
1. The first row is fine as it is.
2. In the second row you need to melt the first cell together with the cell below it. Add rowspan="2" and delete one cell from the third row.
You also need to melt cell 2 and 3 together. Add colspan="2" to cell 2 and delete cell 3.
3. All remaining cells in the third row should be melted together. Add colspan="3" to the first cell and delete the others.

Done! Doing it this way it's easier to keep track of things then if you try to figure it all out in your head before your start to write the table.

Then you need to fix it up with heights. Once the cells are filled with content, you probably don't need a height for the whole table. But when cells are empty or close to empty tables don't always behave, so I added a random height to TABLE. Also note that tables expand to fit their content. They are like rubber ribbons. If no widths and heights were used this table would shrink to a very small size since there's just a single letter in each cell. If you fill it with lots of content it will expand, even beyond the dimensions you've decided. That can be stopped with CSS, but usually it's a good thing that tables behave this way.


CODE
<table border="2" width="50%" height="600">
   <tr>
      <td height="25%">A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
   </tr>
   <tr>
      <td rowspan="2">E</td>
      <td colspan="2" height="25%">F</td>
      <td>G</td>
   </tr>
   <tr>
      <td colspan="3" height="50%">H</td>
   </tr>
</table>


Two things. You should really do the widths and heights with CSS, but I don't know if you've started with that yet so I used HTML attributes.

This table led to something I haven't thought about before. I would rather use a 4x4 table, that way the heights would come naturally. But it would mean all cells in the last row would be eaten by rowspan. I frankly don't know how to handle that or if it's even possible to have such a table. Christian, do you know? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 24 2021, 06:05 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Hi!
QUOTE(iBurgg @ Sep 24 2021, 02:00 AM) *

Table 2 looks like an additional table is nested inside one of the table cells. I don't know if it can be done any other way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 24 2021, 06:07 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Sep 24 2021, 11:46 AM) *

This table led to something I haven't thought about before. I would rather use a 4x4 table, that way the heights would come naturally. But it would mean all cells in the last row would be eaten by rowspan. I frankly don't know how to handle that or if it's even possible to have such a table. Christian, do you know? unsure.gif

I didn't understand the above? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 24 2021, 07:56 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Sep 24 2021, 01:07 PM) *

QUOTE(pandy @ Sep 24 2021, 11:46 AM) *

This table led to something I haven't thought about before. I would rather use a 4x4 table, that way the heights would come naturally. But it would mean all cells in the last row would be eaten by rowspan. I frankly don't know how to handle that or if it's even possible to have such a table. Christian, do you know? unsure.gif

I didn't understand the above? unsure.gif


Typical. rolleyes.gif tongue.gif

I think I was too hasty. I was thinking that if H spanned two rows the height would automagically be twice as high, but it doesn't work that way.

Anyway, say we want to to it that way anyway, with 4 rows. Then all cells in the fourth row would be eaten by the rowspan used for H and the colspan used for E. Can you have an empty TR? Probably not and it's useless anyway because we would effectively have created a 3 row table.

I hadn't eaten and my blood sugar was low, ok? blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 24 2021, 03:51 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



I still don't understand, do you want rowspan=2 on H to make it twice as high? Then maybe you'd need rowspan=3 on E? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 24 2021, 05:13 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, sure, the rawspan for E would need to be increased to 3. But my thinking was way off. If it could be done, such a table would look exactly as a three raw table and the height thing doesn't work as I thought it did when I wrote that anyway, so no point. And one can't have an empty TR. I must have had very, very low blood sugar. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:12 PM