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

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

odpowiedź 23 czerwca 2019 przez pablop76 VIP (123,120 p.)

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.