[HELP] HTML Tabelle

02/12/2017 19:25 MrTherzon#1
Hallo Epvp,

will gerne eine Tabelle mit HTML machen.

Habe sie auch schon aber ist es durchaus Möglich, dort die Zeilen und Spalten durch schwarze Linien zu "trennen" oder mehr platz dazwischen zu machen und das der Kopf der Tabelle nicht untereinander steht.
Wenn ich die "width:" ändere passiert nichts...

So sieht das ganze derzeit aus:

[Only registered and activated users can see links. Click Here To Register...]

Code:

Code:
<table style="width: 250px;">
<tbody>
<tr style="height: 43px;">
<td style="width: 58px; height: 43px;">Stream-Team&nbsp;</td>
<td style="width: 11px; height: 43px;">LoL-Team&nbsp;</td>
<td style="width: 11px; height: 43px;">LoL-Mates&nbsp;</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;MrSoNiice</td>
<td style="width: 11px; height: 23px;">&nbsp;PartyGame(TOP)</td>
<td style="width: 11px; height: 23px;">&nbsp;MrSoNiice</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;Nightbl000</td>
<td style="width: 11px; height: 23px;">&nbsp;Nightbl000(JUNGLE)</td>
<td style="width: 11px; height: 23px;">&nbsp;Nightbl000</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;Nachspiel</td>
<td style="width: 11px; height: 23px;">&nbsp;xSoulSociety(MID)</td>
<td style="width: 11px; height: 23px;">&nbsp;Nachspiel</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;MrTherzon(ADC)</td>
<td style="width: 11px; height: 23px;">&nbsp;Jumpkiller02</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;Jumpkiller02(SUP)</td>
<td style="width: 11px; height: 23px;">&nbsp;xSoulSociety</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;Nachspiel</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;PartyGame</td>
</tr>
</tbody>
</table>
02/12/2017 20:49 False#2
Quote:
Originally Posted by MrTherzon View Post
Hallo Epvp,

will gerne eine Tabelle mit HTML machen.

Habe sie auch schon aber ist es durchaus Möglich, dort die Zeilen und Spalten durch schwarze Linien zu "trennen" oder mehr platz dazwischen zu machen und das der Kopf der Tabelle nicht untereinander steht.
Wenn ich die "width:" ändere passiert nichts...

So sieht das ganze derzeit aus:

[Only registered and activated users can see links. Click Here To Register...]

Code:

Code:
<table style="width: 250px;">
<tbody>
<tr style="height: 43px;">
<td style="width: 58px; height: 43px;">Stream-Team&nbsp;</td>
<td style="width: 11px; height: 43px;">LoL-Team&nbsp;</td>
<td style="width: 11px; height: 43px;">LoL-Mates&nbsp;</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;MrSoNiice</td>
<td style="width: 11px; height: 23px;">&nbsp;PartyGame(TOP)</td>
<td style="width: 11px; height: 23px;">&nbsp;MrSoNiice</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;Nightbl000</td>
<td style="width: 11px; height: 23px;">&nbsp;Nightbl000(JUNGLE)</td>
<td style="width: 11px; height: 23px;">&nbsp;Nightbl000</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;Nachspiel</td>
<td style="width: 11px; height: 23px;">&nbsp;xSoulSociety(MID)</td>
<td style="width: 11px; height: 23px;">&nbsp;Nachspiel</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;MrTherzon(ADC)</td>
<td style="width: 11px; height: 23px;">&nbsp;Jumpkiller02</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;Jumpkiller02(SUP)</td>
<td style="width: 11px; height: 23px;">&nbsp;xSoulSociety</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;Nachspiel</td>
</tr>
<tr style="height: 23px;">
<td style="width: 58px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;</td>
<td style="width: 11px; height: 23px;">&nbsp;PartyGame</td>
</tr>
</tbody>
</table>
Nutz bitte kein heigt/width überall, das ist echt nicht schön^^
[Only registered and activated users can see links. Click Here To Register...] => sowas ?
02/12/2017 21:32 MrTherzon#3
Quote:
Originally Posted by .ƒaℓsє. View Post
Nutz bitte kein heigt/width überall, das ist echt nicht schön^^
[Only registered and activated users can see links. Click Here To Register...] => sowas ?
Muss ehrlich sagen hab das auch nur bekommen denke wurde mit generator gemacht, aber ja genau so meine ich das :)
02/14/2017 10:23 Chicken.ShooT#4
Nimm prozentuale Breiten, sonst schießt es auf einem Smartphone schnell mal über den Container hinaus.

Gesendet von meinem ALE-L21 mit Tapatalk
02/15/2017 22:57 D4rkownz#5
Etwa so?
Code:
<style>    
    td {
        border: 1px solid black;
    }
</style>

<table style="width: 450px;">
<tbody>
<tr>
<td>Stream-Team </td>
<td>LoL-Team </td>
<td>LoL-Mates </td>
</tr>
<tr>
<td> MrSoNiice</td>
<td > PartyGame(TOP)</td>
<td > MrSoNiice</td>
</tr>
<tr>
<td> Nightbl000</td>
<td> Nightbl000(JUNGLE)</td>
<td> Nightbl000</td>
</tr>
<tr>
<td> Nachspiel</td>
<td> xSoulSociety(MID)</td>
<td> Nachspiel</td>
</tr>
<tr>
<td> </td>
<td> MrTherzon(ADC)</td>
<td> Jumpkiller02</td>
</tr>
<tr>
<td > </td>
<td> Jumpkiller02(SUP)</td>
<td> xSoulSociety</td>
</tr>
<tr>
<td ></td>
<td></td>
<td> Nachspiel</td>
</tr>
<tr>
<td></td>
<td></td>
<td> PartyGame</td>
</tr>
</tbody>
</table>
02/17/2017 05:23 ctra#6
Quote:
Originally Posted by D4rkownz View Post
Etwa so?
Code:
<style>    
    td {
        border: 1px solid black;
    }
</style>

<table style="width: 450px;">
<tbody>
<tr>
<td>Stream-Team </td>
<td>LoL-Team </td>
<td>LoL-Mates </td>
</tr>
<tr>
<td> MrSoNiice</td>
<td > PartyGame(TOP)</td>
<td > MrSoNiice</td>
</tr>
<tr>
<td> Nightbl000</td>
<td> Nightbl000(JUNGLE)</td>
<td> Nightbl000</td>
</tr>
<tr>
<td> Nachspiel</td>
<td> xSoulSociety(MID)</td>
<td> Nachspiel</td>
</tr>
<tr>
<td> </td>
<td> MrTherzon(ADC)</td>
<td> Jumpkiller02</td>
</tr>
<tr>
<td > </td>
<td> Jumpkiller02(SUP)</td>
<td> xSoulSociety</td>
</tr>
<tr>
<td ></td>
<td></td>
<td> Nachspiel</td>
</tr>
<tr>
<td></td>
<td></td>
<td> PartyGame</td>
</tr>
</tbody>
</table>

Wenn noch in % angegeben und nicht in px wären sicher alle glücklich hier :)

Als HTML / CSS Anfänger kann ich dir nur [Only registered and activated users can see links. Click Here To Register...] empfehlen. Steht eigentlich alles drin und kannst dich komplett austoben! Fang auch direkt mit CSS Klassen Zuteilung an ist ja sicher nicht das letzte mal das du HTML / CSS anwenden willst.

HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table - MrTherzon</title>
    <style type="text/css">
        @import "css/stylesheet.css";
    </style>
</head>
<body>
    <table class="tableclass">
        <tr>
            <th class="tableclass">Stream - Team</th>
            <th class="tableclass">LoL - Team</th>
            <th class="tableclass">LoL - Mates</th>
        </tr>
        <tr>
            <td class="tableclass">132</td>
            <td class="tableclass">23</td>
            <td class="tableclass">123</td>
        </tr>
        <tr>
            <td class="tableclass">132</td>
            <td class="tableclass">23</td>
            <td class="tableclass">123</td>
        </tr>
        <tr>
            <td class="tableclass">132</td>
            <td class="tableclass">23</td>
            <td class="tableclass">123</td>
        </tr>
        <tr>
            <td class="tableclass">132</td>
            <td class="tableclass">23</td>
            <td class="tableclass">123</td>
        </tr>
        <tr>
            <td class="tableclass">132</td>
            <td class="tableclass">23</td>
            <td class="tableclass">123</td>
        </tr>

    </table>
</body>
</html>
Stylesheet:

HTML Code:
.tableclass{
    width: 100%;
    border-collapse: collapse;

}

td.tableclass{
    border: 1px solid black;
    padding-left:  5px;
    width: auto;
}

th.tableclass{
    border: 1px solid black;
    width: auto;

}


grüße
02/20/2017 01:12 AceHacker99#7
Still need any help? Let me know :)