• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak umieścić tabele tak aby ta nie wychodziła po za < section >

Object Storage Arubacloud
0 głosów
395 wizyt
pytanie zadane 23 czerwca 2019 w HTML i CSS przez MariuszMat Nowicjusz (120 p.)

Witam, jak w temacie proszę o pokierowanie mnie jeśli można. Jak umieścić tabelę w poniższym kodzie tak aby ta nie wychodziła po za kod. Z góry dziękuje za wszelakie odpowiedzi.

            <section class="news">
            <a href="">
            <article>
            <h3><font color="blue">Lista identyfikatorów Minecraft</font></h3>
            <p class="last"><font color="white">Poniżej znajduje się lista numerów identyfikacyjnych (wersje poniżej 1.8) i 
                            nazw identyfikacyjnych (1.8 i wyższych). Aby uzyskać informacje na temat używania identyfikatorów, 
                            które znajdują się poniżej, zapoznaj się z artykułem Spawning Items.</a></br></br>
                            
                            Obecnie znajduje się poniżej 726 identyfikatorów bloków i przedmiotów.</br></br>

                            Legenda</font></br>
                            <font color="Light Blue">Jasnoniebieski identyfikator</font><font color="white"> &nbsp;&nbsp;Można je uzyskać tylko poprzez ich odrodzenie (niektóre można uzyskać za pomocą narzędzi Silk Touch)</font></br>
                            <font color="red">Czerwony identyfikator</font><font color="white"> &nbsp;&nbsp;Są to bloki techniczne, których nie można przekazać graczowi, ale można ich użyć w poleceniach takich jak / setblock</font></br>
                            <font color="Light Green Link">Jasnozielony</font><font color="white"> &nbsp;&nbsp;Dostępne tylko w wersji 1.8 lub wyższej</font></br></br>
            <img src="id/175.png" alt="" />Air &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="id/175.png" alt="" />Stone &nbsp;&nbsp; <img src="id/175.png" alt="" />Stone</br>
            <img src="id/175.png" alt="" />Stone
            </p>
            </article>
        <div class="grey-line"></div>
        <div class="white-line"></div>
            </section>

 

komentarz 23 czerwca 2019 przez Tnifey Pasjonat (24,190 p.)

nie używaj <font> :<  jak już to:

<span style="color: white; font-style: italic;">biały tekst w sumie pochylony</span>

 

2 odpowiedzi

+1 głos
odpowiedź 23 czerwca 2019 przez pablop76 VIP (123,180 p.)
0 głosów
odpowiedź 24 czerwca 2019 przez Job102 Bywalec (2,050 p.)

Witam.

Czy mógłbyś zobrazować lub opisać bardziej szczegółowo, jaki efekt chcesz tutaj uzyskać:

Pozdrawiam.

komentarz 24 czerwca 2019 przez MariuszMat Nowicjusz (120 p.)

Witam, pragnę aby wyglądało to mniej więcej jak na poniższym obrazie.

komentarz 26 czerwca 2019 przez Job102 Bywalec (2,050 p.)

Witam.

Poniżej masz kod HTML i CSS. Sądzę, że chodziło CI o zrobienie tego w tabeli.

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
	<title>Minecraft</title>
	
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<section class="news">
		<article>
			<div class="title">Lista identyfikatorów Minecraft</div>
            <div class="desc">
				Poniżej znajduje się lista numerów identyfikacyjnych (wersje poniżej 1.8) i nazw identyfikacyjnych (1.8 i wyższych). Aby uzyskać informacje na temat używania identyfikatorów, które znajdują się poniżej, zapoznaj się z artykułem Spawning Items.<br>
				Obecnie znajduje się poniżej 726 identyfikatorów bloków i przedmiotów.<br><br>
				<b>Legenda:</b><br>
                <span style="color:LightBlue">Jasnoniebieski identyfikator</span><span style="color:white"> &nbsp;&nbsp;Można je uzyskać tylko poprzez ich odrodzenie (niektóre można uzyskać za pomocą narzędzi Silk Touch)</span><br>
                <span style="color:red">Czerwony identyfikator</span><span style="color:white"> &nbsp;&nbsp;Są to bloki techniczne, których nie można przekazać graczowi, ale można ich użyć w poleceniach takich jak / setblock</span><br>
                <span style="color:LightGreen">Jasnozielony</span><span style="color:white"> &nbsp;&nbsp;Dostępne tylko w wersji 1.8 lub wyższej</span><br><br>
			</div>
			<table style="width:100%;margin:0 auto">
				<tr>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
				</tr>
				<tr>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
				</tr>
				<tr>
					<td class="no" rowspan="2">2</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Stone</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
				</tr>
				<tr>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
				</tr>
				<tr>
					<td class="no" rowspan="2">3</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Stone</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
				</tr>
				<tr>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
				</tr>
				<tr>
					<td class="no" rowspan="2">4</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Stone</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
					<td class="no" rowspan="2">1</td>
					<td class="pic" rowspan="2"><img src="id/175.png" alt="" /></td>
					<td class="remarks">Air</td>
				</tr>
				<tr>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
					<td class="remarks">Air</td>
				</tr>
            </table>
        </article>
	</section>
</body>
</html>

CSS

/* * */
/* { */
	/* box-sizing:border-box; */
/* } */

body, html
{
	height:100%;
}

body
{
	background-color:black;
	margin:0 !important;
}

.title
{
	color:lightblue;
	font-size:24px;
	text-align:center;
}

.desc
{
	color:white;
	padding:5px;
}

.news
{
	background-color:gray;
	margin:0 auto;
	width:80%;
}

tr
{
	width:100%;
}

td
{
	padding:5px;
	border:1px solid black;
}

.no
{
	
	width:5%;
}

.pic
{
	width:10%;
}

.remarks
{
	width:15%;
}

Powinieneś sobie poradzić już dalej, z ustawieniem czcionek, kolorów, itp. W razie problemów - pisz :).

Pozdrawiam.

Podobne pytania

0 głosów
1 odpowiedź 328 wizyt
pytanie zadane 15 maja 2018 w PHP przez Alterwar Dyskutant (7,650 p.)
+1 głos
0 odpowiedzi 152 wizyt
pytanie zadane 10 maja 2021 w SQL, bazy danych przez Bartek030 Obywatel (1,460 p.)
0 głosów
0 odpowiedzi 84 wizyt
pytanie zadane 20 sierpnia 2020 w C# przez krych0s Nowicjusz (120 p.)

92,753 zapytań

141,671 odpowiedzi

320,385 komentarzy

62,100 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...