Jump to content
Please Use CODE Tags

Creating a table in HTML

Hip
By Hip
in Programming
 Share
Posted

Hey guys,

 

I want to create a table in HTML that should look like this:

 

table.png.749a523faa85eb491a3dee72c18e6070.png

 

Here is my code: 

<table border="2">
					<tr>
						<td align="left">Zelle 0</td>
						<td align="left" colspan="3">Zelle1 ab Spalte 2!</td>
					</tr>
					<tr>
						<td align="left" rowspan="3">Zelle 1 über 3 Zeilen</td>
						<td align="left" colspan="3" rowspan="3">Zelle 2 über 3 Spalten und 3 Zeilen</td>
					</tr>
				</table>

Some how it doesn't look like it should. What did I do wrong?

 

Thanks in advance!!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

because you only have 4 cells, so the spanning isn't able to actually do anything. You need other rows and columns if you want to span across other rows and columns. To help illustrate, I took your table and just made a bunch of dummy cells to allow the spanning to work, and your table works fine (though with some extra cells):

  

<table border="2">
    <tr>
        <td align="left">a</td>
        <td align="left">b</td>
        <td align="left">c</td>
        <td align="left">d</td>
    </tr>
    <tr>
        <td align="left">Zelle 0</td>
        <td align="left" colspan="3">Zelle 1 über 3 Zeilen</td>
        <td align="left">a</td>
    </tr>
    <tr>
        <td align="left" rowspan="3">Zelle1 ab Spalte 2!</td>
        <td align="left" rowspan="3" colspan="3">Zelle 2 über 3 Spalten und 3 Zeilen</td>
        <td align="left">b</td>
    </tr>
    <tr>
        <td align="left">c</td>
    </tr>
    <tr>
        <td align="left">d</td>
    </tr>
</table>

will result in the table:
 image.png.b4ba800148fc9d4cbfde07725ac60881.png

 

If you are just concerned with width and height, you can use css styles to adjust size without using spanning: 

<table border="2">
	<tr>
		<td align="left" style="width:60px">Zelle 0</td>
		<td align="left" style="width:150px">Zelle1 ab Spalte 2!</td>
	</tr>
	<tr>
		<td align="left" style="height:100px">Zelle 1 über 3 Zeilen</td>
		<td align="left">Zelle 2 über 3 Spalten und 3 Zeilen</td>
	</tr>
</table>

 

image.png.d6b5cbdcb478e542555cfa475e00f59e.png

 

I'm sure there is a more correct way to do this than hard coded pixel counts, but i'm NOT a web developer so css isn't my forte.

Gaming build:

CPU: i7-7700k (5.0ghz, 1.312v)

GPU(s): Asus Strix 1080ti OC (~2063mhz)

Memory: 32GB (4x8) DDR4 G.Skill TridentZ RGB 3000mhz

Motherboard: Asus Prime z270-AR

PSU: Seasonic Prime Titanium 850W

Cooler: Custom water loop (420mm rad + 360mm rad)

Case: Be quiet! Dark base pro 900 (silver)
Primary storage: Samsung 960 evo m.2 SSD (500gb)

Secondary storage: Samsung 850 evo SSD (250gb)

 

Server build:

OS: Ubuntu server 16.04 LTS (though will probably upgrade to 17.04 for better ryzen support)

CPU: Ryzen R7 1700x

Memory: Ballistix Sport LT 16GB

Motherboard: Asrock B350 m4 pro

PSU: Corsair CX550M

Cooler: Cooler master hyper 212 evo

Storage: 2TB WD Red x1, 128gb OCZ SSD for OS

Case: HAF 932 adv

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 hours ago, reniat said:

 

image.png.d6b5cbdcb478e542555cfa475e00f59e.png

 

The second table is just wI'm looking for, but maybe only in html if this is even possible?

I tried it out in any way I know but it just doesn't work >.<

Thank you for your time!! :-)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
38 minutes ago, Hip said:

The second table is just wI'm looking for, but maybe only in html if this is even possible?

I tried it out in any way I know but it just doesn't work >.<

Thank you for your time!! :-)

there is a pure html way to do the same thing the css styles are doing, but it's deprecated and doesn't work in html5. 

Gaming build:

CPU: i7-7700k (5.0ghz, 1.312v)

GPU(s): Asus Strix 1080ti OC (~2063mhz)

Memory: 32GB (4x8) DDR4 G.Skill TridentZ RGB 3000mhz

Motherboard: Asus Prime z270-AR

PSU: Seasonic Prime Titanium 850W

Cooler: Custom water loop (420mm rad + 360mm rad)

Case: Be quiet! Dark base pro 900 (silver)
Primary storage: Samsung 960 evo m.2 SSD (500gb)

Secondary storage: Samsung 850 evo SSD (250gb)

 

Server build:

OS: Ubuntu server 16.04 LTS (though will probably upgrade to 17.04 for better ryzen support)

CPU: Ryzen R7 1700x

Memory: Ballistix Sport LT 16GB

Motherboard: Asrock B350 m4 pro

PSU: Corsair CX550M

Cooler: Cooler master hyper 212 evo

Storage: 2TB WD Red x1, 128gb OCZ SSD for OS

Case: HAF 932 adv

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
<html>
	<head>	
		<meta charset="utf-8">
		<title>tabelle.html</title>
	</head>
	<body>
		<table border="2" width="60%" align="center">
			<tr>
				<td align="center" >Zelle 1.1</td>
				<td align="center" colspan="3">Zelle 1.2</td>
             	<td align="center" colspan="3">Zelle 1.3</td>
            	<td align="center" colspan="3">Zelle 1.4</td>
			</tr>
			 <tr>
				<td align="center" rowspan="3">Zelle 2.1</td>
				<td align="center" colspan="3" rowspan="3">Zelle 2.2</td>
             	<td align="center" colspan="3" rowspan="3">Zelle 2.3</td>
            	<td align="center" colspan="3" rowspan="3">Zelle 2.4</td>
			<tr> 
				<td align="center" rowspan="3">Zelle 3.1</td>
				<td align="center" colspan="3">Zelle 3.2</td>
				<td align="center" colspan="3">Zelle 3.3</td>
			</tr>
			<tr>
				<td align="center" rowspan="3">Zelle 4.1</td>
				<td align="center" colspan="3">Zelle 4.2</td>
			</tr>
		</table>
	</body>
</html>

I also tried this out, but it doesn't work either:

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, reniat said:

there is a pure html way to do the same thing the css styles are doing, but it's deprecated and doesn't work in html5. 

Is it the way I did it in the last post?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 minutes ago, Hip said:

Is it the way I did it in the last post?

no it's using col width and td height attributes https://www.w3schools.com/tags/att_col_width.asp

 

You're really probably better off with css anyway, since the little bit of webdev I do know tells me that ideally the html should only be a barebones scaffolding that JS and CSS will then make look good. In other words, don't try to hard code visual elements in html. So for this example, just put a table in there with only data with some id attributes in specific cells you want to adjust, and then use those ids in CSS to modify the appearance.

Gaming build:

CPU: i7-7700k (5.0ghz, 1.312v)

GPU(s): Asus Strix 1080ti OC (~2063mhz)

Memory: 32GB (4x8) DDR4 G.Skill TridentZ RGB 3000mhz

Motherboard: Asus Prime z270-AR

PSU: Seasonic Prime Titanium 850W

Cooler: Custom water loop (420mm rad + 360mm rad)

Case: Be quiet! Dark base pro 900 (silver)
Primary storage: Samsung 960 evo m.2 SSD (500gb)

Secondary storage: Samsung 850 evo SSD (250gb)

 

Server build:

OS: Ubuntu server 16.04 LTS (though will probably upgrade to 17.04 for better ryzen support)

CPU: Ryzen R7 1700x

Memory: Ballistix Sport LT 16GB

Motherboard: Asrock B350 m4 pro

PSU: Corsair CX550M

Cooler: Cooler master hyper 212 evo

Storage: 2TB WD Red x1, 128gb OCZ SSD for OS

Case: HAF 932 adv

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
6 minutes ago, reniat said:

no it's using col width and td height attributes https://www.w3schools.com/tags/att_col_width.asp

 

You're really probably better off with css anyway, since the little bit of webdev I do know tells me that ideally the html should only be a barebones scaffolding that JS and CSS will then make look good. In other words, don't try to hard code visual elements in html. So for this example, just put a table in there with only data with some id attributes in specific cells you want to adjust, and then use those ids in CSS to modify the appearance.

Yeah, that's also far more easier to do!

I just wanted to try it out and stuck with it at this point. But now I see why they implemented CSS lol

 

Would be still great to see the final code for this. Maybe someone can show it.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
13 minutes ago, Hip said:

Yeah, that's also far more easier to do!

I just wanted to try it out and stuck with it at this point. But now I see why they implemented CSS lol

 

Would be still great to see the final code for this. Maybe someone can show it.

Boom, here's a codepen I wrote for you: https://codepen.io/kirashi/pen/ajrrZo

Right now the table is 100% width and resizes with the page, but you can change that.

You'll also note it's a table created without table tags. This is intentional, as table tags are from the days of XHTML.

(table tags are still usable, but for best compatibility with current browsers, I'd recommend divs)

Desktop: KiRaShi-Intel-2022 (i5-12600K, RTX2060) Mobile: OnePlus 5T | Koodo - 75GB Data + Data Rollover for $45/month
Laptop: Dell XPS 15 9560 (the real 15" MacBook Pro that Apple didn't make) Tablet: iPad Mini 5 | Lenovo IdeaPad Duet 10.1
Camera: Canon M6 Mark II | Canon Rebel T1i (500D) | Canon SX280 | Panasonic TS20D Music: Spotify Premium (CIRCA '08)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
10 hours ago, kirashi said:

Boom, here's a codepen I wrote for you: https://codepen.io/kirashi/pen/ajrrZo

Right now the table is 100% width and resizes with the page, but you can change that.

You'll also note it's a table created without table tags. This is intentional, as table tags are from the days of XHTML.

(table tags are still usable, but for best compatibility with current browsers, I'd recommend divs)

thanks for this code!

So as @reniat said it's not possible with table tags only in HTML5 am I right?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
14 hours ago, Hip said:

thanks for this code!

So as @reniat said it's not possible with table tags only in HTML5 am I right?

Anything is possible, if you're willing to put in the effort. However, I strongly discourage the use of TABLE tags because browsers are more compatible when using DIV tags (or any other block level element) within the HTML5 standard / specification.

Desktop: KiRaShi-Intel-2022 (i5-12600K, RTX2060) Mobile: OnePlus 5T | Koodo - 75GB Data + Data Rollover for $45/month
Laptop: Dell XPS 15 9560 (the real 15" MacBook Pro that Apple didn't make) Tablet: iPad Mini 5 | Lenovo IdeaPad Duet 10.1
Camera: Canon M6 Mark II | Canon Rebel T1i (500D) | Canon SX280 | Panasonic TS20D Music: Spotify Premium (CIRCA '08)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
8 hours ago, kirashi said:

Anything is possible, if you're willing to put in the effort. However, I strongly discourage the use of TABLE tags because browsers are more compatible when using DIV tags (or any other block level element) within the HTML5 standard / specification.

I will use div tags in my websites anyway :-D

I was just curious how it would work with table tags, but it didn't work out lol

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Unter HTML5 they are trying to stop using tables. Table element is no longer supported. They want you to use CSS 3.0 now. Bootstrap is a good place to start. The classes are actually pretty good. Don't need to write any css code  Tables will not work on mobile devices very well

Michael Summers

Case: Obsidian 900D  MOBO: Rampage IV Extreme CPU:  i7-4960X Ivy Bridge-E 3.6GHz  RAM:: Vengeance Pro 32GB  Boot : RAID 0  840 Pro  512GB  Data:  RAID 10 WD Red  2TB PS: Corsair : AX1200 GPU:  ASUS  GTX-780 Ti

Birthday Gift from my wife - She made me order it and built it :-)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
15 minutes ago, Gofer01 said:

Unter HTML5 they are trying to stop using tables. Table element is no longer supported. They want you to use CSS 3.0 now. Bootstrap is a good place to start. The classes are actually pretty good. Don't need to write any css code  Tables will not work on mobile devices very well

good to know that! thanks!!

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×