DEV Community

aakhtar3
aakhtar3

Posted on

Styling for GitHub README

#beginners #css #github #html

Styling Tips for README

Markdown has limited styling, but you can leverage some HTML for a better viewing experience on a Github repository.

Line Break

Markdown

3 empty space

3 Empty Spaces`   `   
Second line
Enter fullscreen mode Exit fullscreen mode

HTML

</br>

HTML</br>Second Line
Enter fullscreen mode Exit fullscreen mode

Allign

Markdown

Table markdown

| Default | <- Left <- | -> Center <- | -> Right -> |
| ------- | :--------- | :----------: | ----------: |
| Text    | Left       | Center       | Right       |
Enter fullscreen mode Exit fullscreen mode
HTML

p left

<p>Left</p>
Enter fullscreen mode Exit fullscreen mode

p center

<p align="center">Center</p>
Enter fullscreen mode Exit fullscreen mode

p right

<p align="right">Right</p>
Enter fullscreen mode Exit fullscreen mode

a

<a><img alt="Left"></a> <a><img align="right" alt="Right"></a>
Enter fullscreen mode Exit fullscreen mode

table

<table>
<tr>
<td valign="top" width="33%">
<h2 align="center">Col 1</h2>
-----------------------------
-----------------------------
-----------------------------
-----------------------------
</td>
<td width="34%">
<h5 align="center">Col 2</h5>
<p align="center">Missing valign="top"</p>
</td>
<td valign="top" width="33%">
<h2 align="center">Col 3</h2>
-----------------------------
-----------------------------
-----------------------------
-----------------------------
</td>
</tr>
</table>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

sandygalabada profile image

Blur page body when hover on Nav Bar

Sandy Galabada -

bardui profile image

🎨 All the Colors You Need with Tailwind CSS

bardui -

choir241 profile image

Consistency is King, and here's why.

Richard Choi -

safdarali profile image

5 Steps You Must Follow to Deploy a React App on Hostinger

Safdar Ali -